Implement "select all" checkbox in HTML with JavaScript/jQuery

This post will discuss how to implement a “select all” checkbox in HTML in JavaScript and jQuery.

1. Using JavaScript

With pure JavaScript, you can use the checkbox’s checked property to set the checked state of a checkbox. However, you need to set the checked property individually for each checkbox.

To get the list of checkboxes, you can use the getElementsByName() or querySelectorAll() method.

⮚ Using `Document.getElementsByName()`

JS

document.getElementById('select-all').onclick = function() {

var checkboxes = document.getElementsByName('vehicle');

for (var checkbox of checkboxes) {

checkbox.checked = this.checked;

}

HTML

<!doctype html>

<html>

<body>

<p>Choose your vehicle:</p>

<div>

</div>

<div>

</div>

<div>

<label for="car">Select All</label>

</div>

</body>

</html>

Edit in JSFiddle

⮚ Using `Document.querySelectorAll()`

JS

document.getElementById('select-all').onclick = function() {

var checkboxes = document.querySelectorAll('input[type="checkbox"]');

for (var checkbox of checkboxes) {

checkbox.checked = this.checked;

}

HTML

<!doctype html>

<html>

<body>

<p>Choose your vehicle:</p>

<div>

</div>

<div>

</div>

<div>

<label for="car">Select All</label>

</div>

</body>

</html>

Edit in JSFiddle

2. Using jQuery

With jQuery, you can do like:

JS

$(document).ready(function() {

$('#select-all').click(function() {

var checked = this.checked;

$('input[type="checkbox"]').each(function() {

this.checked = checked;

});

})

});

HTML

<!doctype html>

<html>

<body>

<p>Choose your vehicle:</p>

<div>

</div>

<div>

</div>

<div>

<label for="car">Select All</label>

</div>

</body>

</html>

Edit in JSFiddle

A less verbose solution is to use jQuery’s .prop() method.

JS

$(document).ready(function() {

$('#select-all').click(function() {

$('input[type="checkbox"]').prop('checked', this.checked);

})

});

HTML

<!doctype html>

<html>

<body>

<p>Choose your vehicle:</p>

<div>

</div>

<div>

</div>

<div>

<label for="car">Select All</label>

</div>

</body>

</html>

Edit in JSFiddle

That’s all about implementing a ‘select all’ check box in HTML in JavaScript and jQuery.

Implement “select all” checkbox in HTML with JavaScript/jQuery

1. Using JavaScript

⮚ Using Document.getElementsByName()

JS

HTML

⮚ Using Document.querySelectorAll()

JS

HTML

2. Using jQuery

JS

HTML

JS

HTML

Share this:

⮚ Using `Document.getElementsByName()`

⮚ Using `Document.querySelectorAll()`