loading...

Select All Checkboxes with jQuery

twitter logo github logo ・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'));

});

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.

twitter logo DISCUSS (5)
markdown guide
 

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

 

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.

 
 
Classic DEV Post from Apr 18 '18

New Devs, Your Resume Sucks

Tips for New and Junior Developers to sharpen their resume.

Jack Harner πŸš€ profile image
I'm Jack! I'm a Front-End Engineer. I have experience with WordPress, React, Linux Admin, & More! Let's Chat!