How to Check All Checkboxes Using jQuery

Check all and uncheck all check boxes is a pretty common functionality in web development projects. Previously we used to do this functionality using javascript. In this article I will explain How to implement check all and uncheck all check boxes using jQuery.

We will start with the mark up

HTML

Javascript

I have created a Â "check.js" file into â€œjsâ€ folder. All of our javascript code will go into this javascript file.

We already create the "check.js" file. Â Now we are going to add our javascript into the "check.js" file. Add the following code into check.js file.

$(document).ready(function() {
$('#checkall').click(function(){
$("input[type='checkbox']").attr('checked', $('#checkall').is(':checked'));
});
Â 
//------calculate the value---------
$('form').find(':checkbox').click(function(){
var amt=0;
$('div').filter(':gt(0)').find(':checkbox').each(function(){
if($('div:gt(0)'))
{
if($(this).is(':checked'))
{
amt=amt+parseInt($(this).val());
}
}
});
$('p').remove();
$('
').insertAfter('div:eq(5)');
$('p').text('Your bill is $ '+amt);
});
});

The .attr() method is used for setting the attributes of the selected element(s).

Syntax:

.attr(attribute, value)

The .is() method checks the selected element(s) with a selector and returns true if the any of the selected elements match with the selector; otherwise it returns false.

Syntax:

.is(selector)

The $(#checkall).is(:checked) part of the preceding statement checks if the checkbox ofÂ id:checkall is checked. If the checkbox (id: checkall) is checked, the .is() method will return true; otherwise it will return false.

If the .is() method returns true, all the input elements of type:checkbox (that is, all the checkboxes) are set to checked mode; all of them will be set to unchecked mode if the .is() method returns false.

Since the user is allowed to check any individual check box, we check the status of each checkbox that has an index value greater than 0 (because the checkbox with index value 0Â is the Check All checkbox).

The value of all the checkboxes is added to the amt variable. To display the bill, we create a paragraph element and add the text Your bill is amt (where amt is the numerical valueÂ contained in the amt variable), and insert this paragraph element after the div element of index value 5; that is, after the last checkbox.