jquery - iterate over checkboxes and determine if checked

Question

I want to iterate over checkboxes div and determine if checkbox1,checkbox2,checkbox3 are checked

    // iterate over checkboxes
    $('#register_students').click(function() { 
        $("div.checkboxes").each(function() {           
            var student = $(this).attr('data');             
            var checkbox1 = ??? 
            var checkbox2 = ???
            var checkbox3 = ???
        });     
        return false;
    });




<td>
<div class='checkboxes' data=8255>
<INPUT type="checkbox"  value="36" class="checkbox1">
<INPUT type="checkbox"  value="14" class="checkbox2">
</div>
</td>

<td>
<div class='checkboxes' data=8244>
<INPUT type="checkbox"  value="36" class="checkbox1">
<INPUT type="checkbox"  value="14" class="checkbox2">
<INPUT type="checkbox"  value="14" class="checkbox3">
</div>
</td>

Answer 1

Used the :checked selector.

http://api.jquery.com/checked-selector/

EDIT:

And for such examples I would try it on http://jsfiddle.net/... helps a lot!

Answer 2

Use this.

$(this).is(':checked')

returns true or false . Like,

$('#register_students').click(function() {
    $("div.checkboxes").each(function(index1) {
        var student = $(this).attr('data');
        cb = [];           
        $('input[type=checkbox]',this).each(function(index2, Element){
           cb[index2] = $(Element).is(':checked');
        });
        // use 'cb' and 'student' as you want. 3 checkbox value are as cb[0], cb[1], cb[2]
    });     
    return false;
});

Answer 3

You're interating over the divs containing the checkboxes, so you need to find your checkboxes.

(You should also probably cache $(this) to avoid multiple calls):

    $("div.checkboxes").each(function() {
        var $this = $(this);           
        var student = $this.attr('data');             
        var checkbox1 = $this.find('input.checkbox1').is(':checked'); 
        var checkbox2 = $this.find('input.checkbox2').is(':checked'); 
        var checkbox3 = $this.find('input.checkbox3').is(':checked'); 
    });     
    return false;

The three checkbox lines will each return a boolean indicating whther the checkbox in the current div is checked.

Answer 4

for(int i = 1; i < Total; i++){
    if($('div.checkboxes .checkbox' + i).checked){
        //Do checkbox+i stuff
}

You said you wanted to iterate over it, this will let you do just that.

jQuery allows you to do string manipulation to it's $ calls.