Example to Check All or Uncheck All Using JavaScript and jQuery

check or un check all

In this article you can see two simple scripts using JavaScript and jQuery to check or un-check all the  check boxes. Usually beginners/some people write two different functions separately for this functionality but we can do this with a single function to check or un-check all the check boxes.

Using JavaScript:


/** Check All or Uncheck All using Javascript **/
var checkAll = function(){
var chkAll = document.getElementById('chkAll').checked, chkOrangeUsers = document.orangeUsers.chkUsers;

for(var i=0; i<chkOrangeUsers.length;i++){
chkOrangeUsers[i].checked = chkAll;
}
}

Using jQuery:


/** Check All or Uncheck All using jQuery **/
$('#chkGreenAll').bind('click', function(){
var chkGreenAll = this.checked;
$("input[name=chkGreenUsers]").attr("checked",chkGreenAll);
});

 

Below is the complete code which is used for this example…


<html>
<head>
<title>Table list design</title>

<style type="text/css">
.wrapper {
margin: 0 auto;
padding: 40px;
max-width: 800px;
}
.table {
margin: 0 0 40px 0;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: table;
}

.table .row {
display: table-row;
background: #f6f6f6;
}
.table .row .cell{
padding: 6px 12px;
display: table-cell;
}
.table .row:nth-of-type(odd) {
background: #e9e9e9;
}

.table .row.header {
font-weight: 900;
color: #ffffff;
background: #ea6153;
}

.row.header.green {
background: #27ae60;
}

.row.header.blue {
background: #2980b9;
}

@media screen and (max-width: 580px){
.table {
display: block;
}
.table .row {
padding: 8px 0;
display: block;
}
.table .row .cell {
padding: 2px 12px;
display: block;
}
}

.clr{
clear:both;
}
</style>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
<div class="wrapper">
<form name="orangeUsers" id="orangeUsers" method="POST">
<h1>Check All / Uncheck All Using Javascript </h1>
<div class="table">
<div class="row header">
<div class="cell"><input type="checkbox" name="chkAll" id="chkAll" onclick="checkAll();" /></div> <div class="cell"> Name</div> <div class="cell"> Age </div> <div class="cell">Occupation</div><div class="cell">Location</div>
</div>
<div class="row">
<div class="cell"><input type="checkbox" name="chkUsers" /></div> <div class="cell">Luke Peters</div> <div class="cell">25</div><div class="cell">Freelance Web Developer </div><div class="cell">Brookline, MA</div>
</div>
<div class="row">
<div class="cell"><input type="checkbox" name="chkUsers" /></div> <div class="cell">Joseph Smith</div> <div class="cell">24</div><div class="cell">Project Manager </div><div class="cell">Somerville, MA</div>
</div>
<div class="row">
<div class="cell"><input type="checkbox" name="chkUsers" /></div> <div class="cell">Maxwell Johnson</div> <div class="cell">28</div><div class="cell">UX Architect & Designer </div><div class="cell">Brookline, MA</div>
</div>
<div class="row">
<div class="cell"><input type="checkbox" name="chkUsers" /></div> <div class="cell">Harry Harrison</div> <div class="cell">26</div><div class="cell">Front-End Developer </div><div class="cell">Brookline, MA</div>
</div>
</div>
</form>

<div class="clr">&nbsp;</div>

<h1>Check All / Uncheck All Using jQuery </h1>
<div class="table">
<div class="row header green">
<div class="cell"><input type="checkbox" name="chkGreenAll" id="chkGreenAll" /></div><div class="cell"> Name</div> <div class="cell"> Age </div> <div class="cell">Occupation</div><div class="cell">Location</div>
</div>
<div class="row">
<div class="cell"><input type="checkbox" name="chkGreenUsers" /></div> <div class="cell">Luke Peters</div> <div class="cell">25</div><div class="cell">Freelance Web Developer </div><div class="cell">Brookline, MA</div>
</div>
<div class="row">
<div class="cell"><input type="checkbox" name="chkGreenUsers" /></div> <div class="cell">Joseph Smith</div> <div class="cell">24</div><div class="cell">Project Manager </div><div class="cell">Somerville, MA</div>
</div>
<div class="row">
<div class="cell"><input type="checkbox" name="chkGreenUsers" /></div> <div class="cell">Maxwell Johnson</div> <div class="cell">28</div><div class="cell">UX Architect & Designer </div><div class="cell">Brookline, MA</div>
</div>
<div class="row">
<div class="cell"><input type="checkbox" name="chkGreenUsers" /></div> <div class="cell">Harry Harrison</div> <div class="cell">26</div><div class="cell">Front-End Developer </div><div class="cell">Brookline, MA</div>
</div>
</div>

</div>

<script type="text/javascript">
/** Check All or Uncheck All using Javascript **/
var checkAll = function(){
var chkAll = document.getElementById('chkAll').checked, chkOrangeUsers = document.orangeUsers.chkUsers;

for(var i=0; i<chkOrangeUsers.length;i++){
chkOrangeUsers[i].checked = chkAll;
}
}

/** Check All or Uncheck All using jQuery **/
$('#chkGreenAll').bind('click', function(){
var chkGreenAll = this.checked;
$("input[name=chkGreenUsers]").attr("checked",chkGreenAll);
});
</script>
</body>
</html>

Download / Demo

You may also like...