Jquery Checkbox Checked Select All Checkboxes with jQuery

#codepen #showdev #jquery #javascript

A quick little jQuery snippet in order to select all checkboxes in a list of checkboxes.

$("#selectAll").click(function(){
        $("input[type=checkbox]").prop('checked', $(this).prop('checked'));

});

Basically, on Click of the Select All checkbox, set all checkboxes' checked property to the value of the Select All checkbox's checked property. That way you can select or deselect all.

Top comments (8)

Jason Mustard • Jun 1 '20 • Edited

This helps, but now the next step is using an "i" tag with an X to uncheck that specific checkbox. I know, why do that when you already have the check/uncheck function. It's a quiz.

I'm having a hard time targeting a single checkbox

Wyatt Wong • Jun 19 '20 • Edited

How should I define "selectAll" ? I define the checkbox group as follows but I found the jQuery snippet didn't work.

<div id="myclass" >
<strong>My Class</strong><br />
<input type="checkbox" name="selectAll" value="All">All
<input type="checkbox" name="myclassType" value="A">A
<input type="checkbox" name="myclassType" value="B">B
<input type="checkbox" name="myclassType" value="C">C
</div>

Tonistack • Jan 4 '20

how can i deselect the select all checkbox if a checkbox have been uncheck / deselected ?

Jack Harner 🚀 • Jan 6 '20

Updated my pen to do this. Basically on click of any checkbox, if the "checked" prop is false, uncheck the Select All Checkbox.

$("input[type=checkbox]").click(function() {
    if (!$(this).prop("checked")) {
        $("#selectAll").prop("checked", false);
    }
});

Now if you were looking to also check the Select All box when everything gets checked, you'd have to on click, find all the other check boxes, see if they're all checked and set the Select All box accordingly.