//index.html <script type="text/javascript" src="jquery.min.js"></script> <script> $(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" }); } }); }); </script> <style> ul.chk-container li { border-bottom: 1px solid #E7E7E7; padding: 3px;list-style:none; } </style> <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>
article
Sunday, May 11, 2014
How to Select / Deselect All Checkboxes using jQuery
How to Select / Deselect All Checkboxes using jQuery