Question

I have a table that has 8 columns in it. The last column has a <th> header of Refactor? and simply displays a checkbox for each row in the table. If the user wants to Refactor a particular record in the table, they check the row’s Refactor? checkbox and then submit the the form.

I am trying to implement a “Check All” checkbox above the table whereby the user clicks the “Check All” checkbox, and every row in the table gets its Refactor? checkbox checked. I am trying to achieve this in jQuery, and have gotten this far:

$("#checkAll").click(function() {
    alert("Check All has been checked!");

    var checkboxArray = null;
    $.each(checkboxArray, function(key, value) {
        $(key).prop("checked", true);
    });
});

Obviously, this doesn’t work, however when I comment-out everything underneath the alert I can successfully get the alert dialog popping up when I click the “Check All” checkbox, so I’ve gotten that far.

I’m trying to obtain an array (checkboxArray) of all the Refactor? checkboxes in the table. Once I have that array, I just need a way to iterate through each checkbox and set its checked property to true. But I’m having a tough time connecting the dots here. Thanks in advance!

Answer 1

There are 2 approaches, you can check ALL checkboxes

$('input[type=checkbox]').prop('checked', true);

or you can give those refactor boxes a class and only check those

$('.refactorClass').prop('checked', true);