select all checkbox - collect values

Question

I have a container where I have checkboxes. I have a select all checkbox outside the container.

<tr>
<td width="33%">Category <br> <input type="checkbox" id="all_cat" name="catChkBox" class="ckbox"/> Select All/ Unselect All  </td>
</tr>
    <tr>
    <td width="50%" valign="top" id="catTd">
                                        <div class="container" id="categoryContainer"></div>
                                    </td>
    </tr>

Using DWR call i get the checkbox values to be filled in , inside the container.

... function(data.... // data has got the values to be displayed in container with checkboxes
for(var i=0; i<data.length; i++)
{
$('#catContainer').append('<input type="checkbox" data-name="' + data[i].id + '" name="catChkBox" class="ckbox" id = "' + data[i].id + '" value="' + data[i].id + '" /> ' + data[i].name + '<br/>');
list = data[i].name;
catSL.push(data[i].id);
}
categories = $("input[name=catChkBox]:checked").map(function () {
return $(this).data('name');
}).get();
}, errorHandler:function(){
},async:false
});

I want to do select all option now. When I click on the select all checkbox outside the container, it should select the checkboxes inside the container. Similarly for unselect all. I tried the below code, but it dosent work.

$('#all_cat').click( function(){
    for(var i=0; i<categoryData.length; i++)  //categoryData is the data which i get from dwr call
    {
    $(categoryData[i].id ).prop('checked', isChecked('all_cat'));
    }
    });
function isChecked(checkboxId) {
    var id = '#' + checkboxId;
    return $(id).is(":checked");
}

Any help ?????

Should `$(categoryData[i].id ).prop('checked', isChecked('all_cat'));` be `$('#' + categoryData[i].id ).prop('checked', isChecked('all_cat'));` ? — MadSkunk, Oct 10 '13 at 08:50

score 0 · Answer 1 · answered Oct 10 '13 at 08:50

0

You may just use appropriate jQuery selector to select all the checkboxes inside your container and set checked property at once:

$('#all_cat').click(function() {
    $('#catContainer input.ckbox').prop('checked', $(this).is(':checked'));
});

answered Oct 10 '13 at 08:50

Igor Dymov

16,230
5
50
56

score 0 · Answer 2 · answered Oct 10 '13 at 08:53

0

This will set all checkboxes inside the container div to the same checked state as the #all_cat checkbox:

$('#all_cat').click(function(){ 
    $('#categoryContainer input:checkbox').prop('checked', $(this).is(':checked'));
});

answered Oct 10 '13 at 08:53

Richard Dalton

35,513
6
73
91

It works nice. Got a problem. $("input.ckbox:checked").each(function (){ selectedValue.push($(this).val()); }); For this when i tried to alert selectedValue it shows on,1,2 why that on comes ? i want to get rid of it. any help ? – sahana Oct 10 '13 at 09:19
`$("input.ckbox:checked")` will include any checkboxes on your page with the class of ckbox. Try `$('#categoryContainer input.ckbox:checked')` instead. – Richard Dalton Oct 10 '13 at 09:30

select all checkbox - collect values

2 Answers2