jQuery Select / Deselect All Checkboxes

$(document).ready(function() {
      $(‘#selecctall’).click(function(event) {  //on click
if(this.checked) { // check select status
$(‘.checkbox1’).each(function() { //loop through each checkbox
this.checked = true;  //select all checkboxes with class “checkbox1”
});
}
  else
      {
$(‘.checkbox1’).each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class “checkbox1”
});
}
}); });
<ul class=”chk-container”>
<li><input type=”checkbox” id=”selecctall”/> Selecct All</li>
<li><input class=”checkbox1″ type=”checkbox” name=”check[]” value=”item1″> This is Item 1</li>
<li><input class=”checkbox1″ type=”checkbox” name=”check[]” value=”item2″> This is Item 2</li>
<li><input class=”checkbox1″ type=”checkbox” name=”check[]” value=”item3″> This is Item 3</li>
<li><input class=”checkbox1″ type=”checkbox” name=”check[]” value=”item4″> This is Item 4</li>
<li><input class=”checkbox1″ type=”checkbox” name=”check[]” value=”item5″> This is Item 5</li>
<li><input class=”checkbox1″ type=”checkbox” name=”check[]” value=”item6″> This is Item 6</li>
<li><input class=”checkbox2″ type=”checkbox” name=”check[]” value=”item6″> Do not select this</li>
</ul>
Share on Facebook0Tweet about this on Twitter0Share on Google+0Pin on Pinterest0Share on LinkedIn0Share on Reddit0
It's only fair to share...

Add Comment

Required fields are marked *. Your email address will not be published.