Hello friends, Today we will learn about how to select / deselect all checkboxes using Javascript. You have seen this functionality in may application. In which if you select one checkbox and all checkboxes will check. Same way if you uncheck that checkbox then all checkboxes will uncheck.
Let’s go through the example which will help you more about the functinality and logic. In this code we use simple form which contain to many checkbox with same classname. But their id must be different. See the below code for rendering checkboxes.
style.css
.form-table { width:270px; margin-left: auto; margin-right: auto; } label{ font-weight: bold; } #form_submission_ajax{ background-color: #eee; padding-top: 10px; padding-bottom: 10px; } .error{ color: #ff0000; } input { border: 2px solid #531EBF; padding: 4px; } input[type="submit"] { padding: 5px 15px; background-color: #531EBF; border: 2px solid #531EBF; color: #fff; border-radius: 5px; } h1 { color: #531EBF; }The above code is simple css style code for html form. Now we will see about check-boxes form code. See the index.php file ucuz türk takipçi satın al
index.php
<!DOCTYPE html> <html> <head> <title>Select - Deselect all checkbox using javascript</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="main.js"></script> </head> <body> <h1><center>Select - Deselect all checkbox using javascript</center></h1> <form action="" method="post" onsubmit="return validate();" id="form_submission_ajax"> <table class="form-table"> <tr> <td></td> <td><input type="checkbox" name="item[]" class="item" value="checkbox_1"> Checkbox-1 </td> </tr> <tr> <td></td> <td><input type="checkbox" name="item[]" class="item" value="checkbox_2"> Checkbox-2 </td> </tr> <tr> <td></td> <td><input type="checkbox" name="item[]" class="item" value="checkbox_3"> Checkbox-3 </td> </tr> <tr> <td></td> <td><input type="checkbox" name="item[]" class="item" value="checkbox_4"> Checkbox-4 </td> </tr> <tr> <td></td> <td><input type="checkbox" name="item[]" class="item" value="checkbox_5"> Checkbox-5 </td> </tr> <tr> <td></td> <td><input type="checkbox" name="item[]" class="item" value="checkbox_6"> Checkbox-6 </td> </tr> <tr> <td></td> <td><input type="checkbox" name="item[]" class="item" value="checkbox_7"> Checkbox-7 </td> </tr> <tr> <td></td> <td><input type="checkbox" name="select_all" class="select_all" id="select_all" onchange="checkData();"> Select All </td> </tr> <tr> <td></td> <td> <input type="submit" name="submit" value="Submit"> </td> </tr> </form> </body> </html>In index.php file i make simple html form with some checkboxes and submit button. Here in the form we have many checkboxes named checkbox_1, checkbox_2 etc. The final one checkbox is “select all”. We will select / deselect all checkboxes using this checkbox and javascript. It’s quite simple. See the below code.
main.js
function checkData(str) { var select_all_status = document.getElementById("select_all").checked; var allcheckbox = document.getElementsByClassName('item'); if(select_all_status == true) { for(i=0; i<allcheckbox.length; i++) { allcheckbox[i].checked=true; } } else { for(i=0; i<allcheckbox.length; i++) { allcheckbox[i].checked=false; } } } function validate() { var selected_data = []; var items = document.getElementsByClassName('item'); for(i=0; i<items.length; i++) { if(items[i].checked == true) { selected_data.push(items[i].value); } } alert(selected_data); }In the main.js file, we have two javascript function, checkData(str) will execute while user click on “select all” checkbox button. This function will check that if “select all” checkbox is checked then make all checkboxes uncheck or vice-versa. The second function validate() will execute while someone click on submit button. It will alert the value of selected checkboxes.
I hope that you may like this tutorial. If you like this tutorial then please share it. As it is, If you find out any problem regarding this tutorial then please let me know in the comment box. We will definitely solve that problem. Thank you very much for supporting this website.
