Check box select/dselect all Examples and demo using jquery/javascript
Create a file called index.html using the below code and try to execute.code explains how select/dselect all for the list of checkboxes.here checkbox id,class are used for the working of select all.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <input type="checkbox" class="chkbox_select_all_class" id="select_all">Select All <br> <input type="checkbox" class="chkbox_class">One <br> <input type="checkbox" class="chkbox_class">Two <br> <input type="checkbox" class="chkbox_class">Three <br> <input type="checkbox" class="chkbox_class">Four <br> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script> $("#select_all").click(function() { if(this.checked) { $(".chkbox_class").prop('checked',true); } else { $(".chkbox_class").prop('checked',false); } }); $('.chkbox_class').change(function() { if(this.checked==false) { $("#select_all").prop('checked',false); } else { if($(".chkbox_class:checked").length==$(".chkbox_class").length) { $("#select_all").prop('checked',true); } } }); </script> |