@Html.Checkbox select all

Question

So I have a table inside of my view and I have gotten to the point where my select-all checkbox is selecting/unselecting. However I can't seem to get it to select all the checkboxes. It only selects the first checkbox in the list.

Here is a snippet from my view.

<table class="table table-bordered">
<tr>
    <th>@Html.CheckBox("CheckAll", false, new { id = "select_all" })</th>

@for (int i = 0; i < Model.additionalCustomerInfoListView.Count; i++)
{
    <tr>                            
        <td>@Html.CheckBoxFor(model => model.additionalCustomerInfoListView[i].IsSelected, new { id = "someDivId" })</td>

and here is my jQuery

$('#select_all').click(function () {
    var c = this.checked;
    $('#someDivId').prop('checked', c)
});

Appreciate any help I can get!

IDs are unique, you cannot have same ID (`someDivId`) multiple times. You should change them to class. — Milan Chheda, Jul 27 '17 at 13:19
Possible duplicate of [Can multiple different HTML elements have the same ID if they're different elements?](https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme) — mjwills, Jul 27 '17 at 13:19
You may try a different selector. Eg.: `$('.table td [type="checkbox"]').prop('checked', c)` — Werner, Jul 27 '17 at 13:21
You should also consider scripts to uncheck the 'Select All' if previously selected and the user un-checks one row. And also to check it if the user manually un-checks all rows. — , Jul 27 '17 at 23:09

score 5 · Accepted Answer · answered Jul 27 '17 at 13:23

5

Change new { id = "someDivId" } to new { @class= "someClass"}.

Then Select all elements with "someClass" by using:

$('#select_all').click(function () {
    $('.someClass').prop('checked', this.checked)
});

answered Jul 27 '17 at 13:23

TheJoeIaut

1,522
2
26
59

That worked perfectly! Thanks. I'll mark it answered as soon as it lets me. – snapper Jul 27 '17 at 13:26

score 0 · Answer 2 · answered Jul 27 '17 at 13:37

You should consider the other way also like when a child checkbox deselected then the parent should also be deselected.

Means if there are 10 checkboxes in table and if one is not selected then you should deselect the parent also.

Here is the code to select parent when you are selecting child checkboxes one by one

Via child

if($('#myTable tr').length-1 == $(".someClass:checked").length)
{
    //Select parent
}

Via Parent

$('#select_all').click(function () {
    $('.someClass').prop('checked', this.checked)
});

Thanks

@Html.Checkbox select all

2 Answers2