Enable Checkbox using JavaScript

In this Javascript Example, We are showing How to Enable Checkbox using JavaScript.

HTML Code

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Select All Checkbox Example</title>
</head>
<body>
<h2>Employee List</h2>
<table cellspcing="5" cellpadding="5" border="1">
<tr>
<th><input type="checkbox" onclick="selectAll(this);"></th>
<th><label>ID</label></th>
<th><label>Name</label></th>
<th><label>Email ID</label></th>
<th><label>Phone</label></th>
</tr>
<tr>
<td><input type="checkbox" name="selectAll" value="101"></td>
<td>101</td>
<td>Dinesh</td>
<td>dinesh@idineshkrishnan.com</td>
<td>+91 9941937705</td>
</tr>
<tr>
<td><input type="checkbox" name="selectAll" value="102"></td>
<td>102</td>
<td>Krishnan</td>
<td>krishnan@idineshkrishnan.com</td>
<td>+91 8989898989</td>
</tr>
<tr>
<td><input type="checkbox" name="selectAll" value="103"></td>
<td>103</td>
<td>Kumar</td>
<td>kumar@idineshkrishnan.com</td>
<td>+91 8787878787</td>
</tr>
<tr>
<td><input type="checkbox" name="selectAll" value="104"></td>
<td>104</td>
<td>John</td>
<td>john@idineshkrishnan.com</td>
<td>+91 9797979797</td>
</tr>
<tr>
<td><input type="checkbox" name="selectAll" value="105"></td>
<td>105</td>
<td>Smith</td>
<td>smith@idineshkrishnan.com</td>
<td>+91 7171717171</td>
</tr>
</table>
</body>
</html>

JavaScript Code

function selectAll(obj) {
if (obj.checked == true) {
var list = document.getElementsByName("selectAll");
for (var i = 0; i < list.length; i++) {
list[i].checked = true;
}
} else if (obj.checked == false) {
var list = document.getElementsByName("selectAll");
for (var i = 0; i < list.length; i++) {
list[i].checked = false;
}
}
}

Final Code

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Select All Checkbox Example</title>
</head>
<body>
<h2>Employee List</h2>
<table cellspcing="5" cellpadding="5" border="1">
<tr>
<th><input type="checkbox" onclick="selectAll(this);"></th>
<th><label>ID</label></th>
<th><label>Name</label></th>
<th><label>Email ID</label></th>
<th><label>Phone</label></th>
</tr>
<tr>
<td><input type="checkbox" name="selectAll" value="101"></td>
<td>101</td>
<td>Dinesh</td>
<td>dinesh@idineshkrishnan.com</td>
<td>+91 9941937705</td>
</tr>
<tr>
<td><input type="checkbox" name="selectAll" value="102"></td>
<td>102</td>
<td>Krishnan</td>
<td>krishnan@idineshkrishnan.com</td>
<td>+91 8989898989</td>
</tr>
<tr>
<td><input type="checkbox" name="selectAll" value="103"></td>
<td>103</td>
<td>Kumar</td>
<td>kumar@idineshkrishnan.com</td>
<td>+91 8787878787</td>
</tr>
<tr>
<td><input type="checkbox" name="selectAll" value="104"></td>
<td>104</td>
<td>John</td>
<td>john@idineshkrishnan.com</td>
<td>+91 9797979797</td>
</tr>
<tr>
<td><input type="checkbox" name="selectAll" value="105"></td>
<td>105</td>
<td>Smith</td>
<td>smith@idineshkrishnan.com</td>
<td>+91 7171717171</td>
</tr>
</table>
<script>
function selectAll(obj) {
if (obj.checked == true) {
var list = document.getElementsByName("selectAll");
for (var i = 0; i < list.length; i++) {
list[i].checked = true;
}
} else if (obj.checked == false) {
var list = document.getElementsByName("selectAll");
for (var i = 0; i < list.length; i++) {
list[i].checked = false;
}
}
}
</script>
</body>
</html>

Output

Enable Checkbox using JavaScript

Tags:

No responses yet

Leave a Reply

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