How Do I Check Multiple Checkboxes With Jquery Without Giving Each An Id?

I am trying to check multiple checkboxes using one with jQuery. I know how to do this to check all checkboxes or to check multiple if they have ids. I want to be able to do this wi

Solution 1:

Note: I started writing this answer for a duplicate of this question and realized I couldn't post this, so I posted it here instead. The table structure is different and a lot simplified in this answer.

Lets start off with a very simple table with a checkbox column:

<table><thead><tr><thscope='col'id='toggler'><inputtype='checkbox'id='toggleAll'><labelfor='toggleAll'>Select all</label></th><thscope='col'>A column</th></tr></thead><tbody><tr><tdheaders='toggler'><inputtype='checkbox'></td><td>some cell data</td></tr><tr><tdheaders='toggler'><inputtype='checkbox'></td><td>some cell data</td></tr><tr><tdheaders='toggler'><inputtype='checkbox'></td><td>some cell data</td></tr><tr><tdheaders='toggler'><inputtype='checkbox'></td><td>some cell data</td></tr><tr><tdheaders='toggler'><inputtype='checkbox'></td><td>some cell data</td></tr></tbody></table>

Here, I have a checkbox in the header along with a label for accessibility purposes (you may hide the label if you wish).

I've also given the header cell an ID and used the headers attribute for the td elements. This isn't absolutely necessary for what we're doing, however it seems like an appropriate case to use the headers attribute. If you ever want to move the checkbox to another column for certain rows, you can just add the headers attribute to that cell.

Here is some JavaScript code:

$('#toggleAll').change(function () {
    $('td[headers~="toggler"] >  input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});

We are binding a function to the change event to the checkbox in the header.

The selector will look for all checkboxes that are children of td elements that contain the ID toggler in a space-separated list of tokens in the headers attribute.

The .prop() method sets the checked property of the checkboxes to match the value of the checked property of the one in the header ("this").

Our basic functionality is done here.

We can make improvements though, by changing the state of the checkbox at the top to match the state of the checkboxes in the rows.

The state of the header checkbox should be:

• Unchecked if 0 are checked
• Interdetermine if (0, n) are checked
• Checked if n are checked

Where n indicates all the checkboxes.

To do this, we bind a function to the change event of each of the boxes in the table rows:

$('td[headers~="toggler"] > input[type="checkbox"]').change(function() {
    var allChecked = true, noneChecked = true;
    var headerCheckbox = $('#toggleAll');

    $('td[headers~="toggler"] > input[type="checkbox"]').each(function(i, domElement) {
        if(domElement.checked) {
            // at least one is checked
            noneChecked = false;
        } else {
            // at least one is unchecked
            allChecked = false;
        }
    });

    if(allChecked) {
        headerCheckbox.prop('checked', true);
        headerCheckbox.prop('indeterminate', false);
    } elseif (noneChecked) {
        headerCheckbox.prop('checked', false);
        headerCheckbox.prop('indeterminate', false);
    } else {
        headerCheckbox.prop('indeterminate', true);
    }
});

I'm using .each() here to loop through all of the appropriate checkboxes to determine whether all, none, or some are checked.

See the jsFiddle demo.

Hope this helps, I sure learned quite a bit while answering the question!

Solution 2:

See this fiddle for a cleaner way:

http://jsfiddle.net/W75dy/19/

<td class="field">
    <formclass="fieldCheck"><inputtype="checkbox"id="Row1Chk"name="Row1"value="Row1" /></form>Programs
</td>

$('#Row1Chk').on('change', function(event) {
    $('table.checkTable input[type=checkbox]').prop('checked', $(this).prop('checked'));
});