DEV Community


Jquery Checkbox Checked Select All Checkboxes with jQuery

jackharner profile image Jack Harner πŸš€ ・1 min read

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

        $("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)

Editor guide
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

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

64ost profile image

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

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.

64ost profile image
psycho profile image
jackharner profile image