Question

我目前正在构建一个包含 3 个复选框和一个显示在下方的动态按钮的表单。

我目前的问题是当您选择多个然后再勾选一个时，活动状态和停用状态按钮都会出现

https://staging-homecarepulse.kinsta.cloud/demo-select/ 这是我的演示链接

这是我使用的脚本

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>$(document).on("change", ".mod-link", function() {
  var arr = []
  $(".mod-link:checked").each(function() {
    arr.push($(this).val());
  })
      if ($(this).is(":checked")) {
      $('#picture').attr('src', '');
    } else {
        $('#picture').attr('src', 'https://staging-homecarepulse.kinsta.cloud/wp-content/uploads/2021/06/greyBTN.jpg');
    }
  var vals = arr.join(",")
  var str = "/demo/?demo_request_type=" + vals;
  var link = arr.length > 0 ? '<a class="dynabtn" href="'+str+'">Continue</a>': '' ;
  
  $('.link-container').html(link);
  
});

</script>

这是我的 html

<input type="checkbox" id="checkbox1" class="mod-link" name="selected" value="es" hidden>
<label for="checkbox1" style="cursor: pointer;">CHECK BOX styling and info  HERE</label>

<div class="link-container" style="text-align:center;"></div>

<div style="text-align:center;">
<span class="result_img">
      <img id="picture" src="https://staging-homecarepulse.kinsta.cloud/wp-content/uploads/2021/06/greyBTN.jpg"/>
    </span>
</div>

我想弄清楚如何隐藏灰色图像按钮，直到选中“ALL OR NO”复选框。所以简而言之，#picture 不应该显示，直到 ALL OR NO CHECKBOXES ARE SELECTED

感谢任何帮助

Answer 1

您也可以提前检查 arr.length 以显示和隐藏灰色按钮。请看下面的代码：

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>$(document).on("change", ".mod-link", function() {
  var arr = []
  $(".mod-link:checked").each(function() {
    arr.push($(this).val());
  })
      if (arr.length > 0) {
      $('#picture').attr('src', '');
    } else {
        $('#picture').attr('src', 'https://staging-homecarepulse.kinsta.cloud/wp-content/uploads/2021/06/greyBTN.jpg');
    }
  var vals = arr.join(",")
  var str = "/demo/?demo_request_type=" + vals;
  var link = arr.length > 0 ? '<a class="dynabtn" href="'+str+'">Continue</a>': '' ;
  
  $('.link-container').html(link);
  
});

</script>

希望它能解决您的问题。

根据复选框选择切换按钮

1 个答案: