使用jQuery选择列表中的所有复选框

时间:2019-04-10 14:30:51

标签: jquery list checkbox toggle

这是我正在使用的HTML / jQuery的示例/示例。

$(function() {
  $("#check_all_uw").change(function() {
    var checkboxes_uw = $(this).closest(".China-uw-class").find(":checkbox");
    if ($(this).prop("checked")) {
      checkboxes_uw.prop("checked", true);
    } else {
      checkboxes_uw.prop("checked", false);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="China-uw" class="tabcontent-uw" style="display: block;">
  <h3 id="china-h3" class="uw-h3" style="font-weight:lighter;">China</h3>
  <div id="China-ul" class="China-uw-class">
    <div><label><input type="checkbox" class="uw-checkbox">Select All</label></div>
    <div><label><input type="checkbox" class="uw-checkbox">Zhang Yi</label></div>
    <div><label><input type="checkbox" class="uw-checkbox">Ken Yan</label></div>
  </div>
</div>

1 个答案:

答案 0 :(得分:2)

这里是is()的固定代码

$(function() {
  $("#check_all_uw").change(function() {
    $(".uw-checkbox:checkbox")
      .not(this)
      .prop("checked", $(this).is(":checked"));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="China-uw" class="tabcontent-uw" style="display: block;">
  <h3 id="china-h3" class="uw-h3" style="font-weight:lighter;">China</h3>
  <div id="China-ul" class="China-uw-class">
    <div><label><input type="checkbox" id="check_all_uw" class="uw-checkbox">Select All</label></div>
    <div><label><input type="checkbox" class="uw-checkbox">Zhang Yi</label></div>
    <div><label><input type="checkbox" class="uw-checkbox">Ken Yan</label></div>
  </div>
</div>