CODEWITHSUNDEEP
jquerylistcheckboxtoggle
MichaelRSF
MichaelRSF

Reputation: 896

Select All checkboxes in a List with Jquery

Here is an sample/example of HTML/jQuery I'm working with.

$(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>

Upvotes: 1

Views: 22

Answers (1)

User863
User863

Reputation: 20039

Here is a fixed code is 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>

Upvotes: 2

Related Questions