![[ info ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvLLqADnAK9xPqLtqTQ6fPmxed7GEnIR73zosubICybujchccNTHrafmIMSAXrTEbdlchQvuLkgA2W8oy70RwbX3Re7kILy6g28-KfaNLWAK9OfkOCtOEbA23P3BAmMk0r1Sq0k_SLHGo/s1600/devinfo.png)
Hello everyone, in this post we we are going to learn how to implement check/uncheck all the checkboxes using javascript. It is the most common requirement in the project development. Ofcourse we can do this by using Jquery, AngularJS but in this post we will implement using simple javascript the we will go for other technologies.
Following are the steps to follow to implement this requirement or task,
Step 1: ( HTML code for displaying all checkboxes )
Following is the code to display the checkboxes with corresponding technologies to be checked in a table,
<table>
<thead>
<th> <input type="checkbox" onchange = "checkUncheckAll(this)" id = "toggle"> </th>
<th> Technology </th>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" name = "inp[]"> </td>
<td> Java </td>
</tr>
<tr>
<td> <input type="checkbox" name = "inp[]"> </td>
<td> Dot Net </td>
</tr>
<tr>
<td> <input type="checkbox" name = "inp[]"> </td>
<td> PHP </td>
</tr>
<tr>
<td> <input type="checkbox" name = "inp[]"> </td>
<td> Python </td>
</tr>
</tbody>
</table>
Step 2: ( JavaScript code to check / uncheck all )
Following is the javascript code to check and uncheck all,
Logic 1:
function checkUncheckAll(t){
// Logic One
// Where t is nothing but the object of check/uncheck all checkbox
// Getting all the inputs ( such as checkbox, submit, textboxe, etc )
var inputs = document.getElementsByTagName('input');
// Checking the type of inputs using loop
for(var i = 0; i < inputs.length; i++){
// If the the input type is checkbox then we need to operate
if(inputs[i].type == 'checkbox'){
// Will set the checked property of the checkboxes to the value of checked property of Check All check box
inputs[i].checked = t.checked
}
}
}
Logic 2:
function checkUncheckAll(t){
// Alternate Logic
// Where t is nothing but the object of check/uncheck all checkbox
// Getting all the elements whose name is "inp[]"
var checkboxes = document.getElementsByName('inp[]');
// Will get the checked property of each checkboxes using loop
for(var i = 0; i < checkboxes.length; i++){
// Set the checked property of each checkbox to the value of the checked property of toggle checkbox
checkboxes[i].checked = t.checked;
}
}
Here in above t.checked may be true or false based on check or uncheck of toggle checkbox and this boolean value will set to the checked property of individual checkbox.
Complete Code:
<!DOCTYPE html>
<html>
<head>
<title> Check/Uncheck all checkboxes using JavaScript </title>
<script>
function checkUncheckAll(t){
// Logic One
// Where t is nothing but the object of check/uncheck all checkbox
// Getting all the inputs ( such as checkbox, submit, textboxe, etc )
var inputs = document.getElementsByTagName('input');
// Checking the type of inputs using loop
for(var i = 0; i < inputs.length; i++){
// If the the input type is checkbox then we need to operate
if(inputs[i].type == 'checkbox'){
// Will set the checked property of the checkboxes to the value of checked property of Check All check box
inputs[i].checked = t.checked
}
}
}
</script>
</head>
<body>
<table>
<thead>
<th> <input type="checkbox" onchange = "checkUncheckAll(this)" id = "toggle"> </th>
<th> Technology </th>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" name = "inp[]"> </td>
<td> Java </td>
</tr>
<tr>
<td> <input type="checkbox" name = "inp[]"> </td>
<td> Dot Net </td>
</tr>
<tr>
<td> <input type="checkbox" name = "inp[]"> </td>
<td> PHP </td>
</tr>
<tr>
<td> <input type="checkbox" name = "inp[]"> </td>
<td> Python </td>
</tr>
</tbody>
</table>
</body>
</html>
No comments:
Post a Comment