DEV Community

loading...

Jquery Checkbox Checked Select All Checkboxes with jQuery

Jack Harner πŸš€
I'm Jack! I'm a Freelance Developer. I have experience with WordPress, Shopify, BigCommerce, React, Linux Admin, & More! Ask Me Anything!!
・1 min read

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'));

});
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (7)

Collapse
mustardbt profile image
Jason Mustard • 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

Collapse
wyattwong profile image
wyatt-wong • 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>

Collapse
64ost profile image
Tonistack

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

Collapse
jackharner profile image
Jack Harner πŸš€ Author

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.

Collapse
64ost profile image
Tonistack

Thanks

Collapse
psycho profile image
Jerico Tilacas

wrong

Collapse
jackharner profile image
Jack Harner πŸš€ Author

Care to elaborate?