@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
– Milan Chheda, Commented Jul 27, 2017 at 13:19
Possible duplicate of Can multiple different HTML elements have the same ID if they're different elements? — mjwills
– mjwills, Commented Jul 27, 2017 at 13:19
You may try a different selector. Eg.: $('.table td [type="checkbox"]').prop('checked', c) — Werner
– Werner, Commented Jul 27, 2017 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. — user3559349
– user3559349, Commented Jul 27, 2017 at 23:09

TheJoeIaut · Accepted Answer · 2017-07-27 13:23:04Z

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, 2017 at 13:23

TheJoeIaut

1,5323 gold badges27 silver badges59 bronze badges

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

1 Comment

snapper Over a year ago

That worked perfectly! Thanks. I'll mark it answered as soon as it lets me.

Abhishek K. Upadhyay · Accepted Answer · 2017-07-27 13:37:14Z

0

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

answered Jul 27, 2017 at 13:37

Abhishek K. Upadhyay

1,0327 silver badges19 bronze badges

Collectives™ on Stack Overflow

@Html.Checkbox select all

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related