Need help with jquery checkboxes set

Question

I have a DOM structure sometihng like this (I don't want to show other td's because of overcrowding):

<table>
<tr><td><input type="checkbox" name="checkbox1" class="rowSelectCheckbox"></td></input></tr>
<tr><td><input type="checkbox" name="checkbox2" class="rowSelectCheckbox"></td></input></tr>
<tr><td><input type="checkbox" name="checkbox3" class="rowSelectCheckbox"></td></input></tr>
<tr><td><input type="checkbox" name="checkbox4" class="rowSelectCheckbox"></td></input></tr>

</table>

<input type="checkbox" name="checkbox_select" id="lastCheckbox"></input>

What I'm trying to do is set the last checkbox with the id of lastCheckbox to checked if any of the other checkboxes are checked (any of those with id of checkbox1, checkbox 2 etc), otherwise if all the other checkboxes are unchecked, set this last checkbox to unchecked too.

JKS · Accepted Answer · 2011-09-04 00:02:38Z

1

One little niggle: the closing </input> tag belongs before the </td> tag.

Otherwise it's pretty straightforward.

$(".rowSelectCheckbox").click(function(){
    var lastCheckbox = $("#lastCheckbox");
    if $(".rowSelectCheckbox:checked").length) {
        lastCheckbox.attr("checked", "checked");
    } else {
        lastCheckbox.removeAttr("checked");
    }
});

answered Sep 4, 2011 at 0:02

JKS

3,7803 gold badges31 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Bradley · Accepted Answer · 2011-09-03 23:55:06Z

0

Try this:

$('.rowSelectCheckbox').change( function() {
    $('.rowSelectCheckbox').each( function() {
        if ($(this).prop('checked')) {
            $('#lastCheckbox').prop('checked', true);
            return false;
        }

        $('#lastCheckbox').prop('checked', false);
    } );
} );

Fiddle: http://jsfiddle.net/B78vP/

answered Sep 3, 2011 at 23:55

Matt Bradley

4,5031 gold badge22 silver badges13 bronze badges

2 Comments

menislici Over a year ago

Thanks mate, I saw it on the link you provided. It worked like a charm.

Jakob Jingleheimer Over a year ago

Not to smack you down, but looping thru anything with .rowSelectCheckbox is kind of a little wasteful :/ You only need to check if one of .rowSelectCheckbox is checked (rather than all)

Bojangles · Accepted Answer · 2011-09-04 00:02:08Z

0

The following jQuery should do the trick

$(document).ready(function() {
    $(".rowSelectCheckbox").click(function() {
        var numChecked = $(".rowSelectCheckbox").filter(":checked").length;

        if(numChecked > 0)
        {
            $("#lastCheckbox").prop("checked", "checked");
        }
        else
        {
            $("#lastCheckbox").prop("checked", false);
        }
    });
});

This will count the number of checked checkboxes when any one of them is clicked and, if this number is greater than 0, check the last checkbox outside the table.

There's a working example here.

answered Sep 4, 2011 at 0:02

Bojangles

102k50 gold badges175 silver badges209 bronze badges

Comments

Nachshon Schwartz · Accepted Answer · 2011-09-04 00:05:53Z

0

You should do something like this:

$('.rowSelectCheckbox').change( function() {
    flag = false;
    $('.rowSelectCheckbox').each( function() {
        if ($(this).is(':checked')) {
            flag = true;
        }
    });    
    $('#lastCheckbox').prop('checked', flag);
});

Live demonstration here: http://jsfiddle.net/nayish/teXHe/

edited Sep 4, 2011 at 0:05

answered Sep 3, 2011 at 23:59

Nachshon Schwartz

15.9k20 gold badges65 silver badges99 bronze badges

3 Comments

menislici Over a year ago

It seems not to be working for some reason... actually it seems way too complicated for me, though I'm desperate for this snippet

Nachshon Schwartz Over a year ago

Edited answer, I had it wrong before, only worked when all checkboxes were checked. Should work now :)

menislici Over a year ago

Yeah, just checked the demo. Works perfectly. Thanks.

Jakob Jingleheimer · Accepted Answer · 2011-09-04 00:33:44Z

0

A quick if-test should do this:

$("input.rowSelectCheckbox").change(function(){
    if ( $("input.rowSelectCheckbox:checked") ) { //include "rowSelectCheckbox" so id=lastCheckbox doesn't trip the test
        $("input#lastCheckbox").attr("checked");
    }
    else
        $("input#lastCheckbox").removeAttr("checked");
    }
});

A loop, such as .each(), is unnecessary since you only care if (any) one of input.rowSelectCheckbox is checked. This will return true the first time it encounters an <input class="rowSelectCheckbox" /> that is checked ;)

edited Sep 4, 2011 at 0:33

answered Sep 4, 2011 at 0:02

Jakob Jingleheimer

31.7k27 gold badges81 silver badges127 bronze badges

Collectives™ on Stack Overflow

Need help with jquery checkboxes set

5 Answers 5

Comments

2 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related