Asp.net jQuery works outside, but not inside foreach loop

Question

This is the script I am working with.

$(document).ready(function () {
    $('#selectall').click(function () {
        $('.selectedId').prop('checked', isChecked('selectall'));
    });
});

function isChecked(checkboxId) {
    var id = '#' + checkboxId;
    return $(id).is(":checked");
}

function resetSelectAll() {
    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    if ($(".selectedId").length === $(".selectedId:checked").length) {
        $("#selectall").attr("checked", "checked");
    } else {
        $("#selectall").removeAttr("checked");
    }

    if ($(".selectedId:checked").length > 0) {
        $('#edit').attr("disabled", false);
    } else {
        $('#edit').attr("disabled", true);
    }
}

And this is the cshtml view.

<table id="notificationsTableId">
    <thead>
    <tr role="row">
        <th rowspan="1" colspan="1">
            <input type="checkbox" id="selectall" />
        </th>
    </tr>
    </thead>
    <tbody>
    <tr class="results-table-row odd">
        <td>
            <input type="checkbox" class="selectedId" name="selectedId" onclick="resetSelectAll();"/>
        </td>
    </tr>
    <tr class="results-table-row even">
        <td>
            <input type="checkbox" class="selectedId" name="selectedId" onclick="resetSelectAll();"/>
        </td>
    </tr>
    <tr class="results-table-row even odd">
        <td>
                <input type="checkbox" class="selectedId" name="selectedId" onclick="resetSelectAll();" />
        </td>
    </tr>
    </tbody>
</table>

Right now the select button will work like it should, if i check it it will check all the dates inside that table. But what I want to do is I want that button to select all the Check-boxes on the page. But if I give a checkbox the same ID inside my foreach loop like this:

@foreach (var date in group)
{
    var isoDate = date.ToString("yyMMdd");
    var day = date.ToString("ddd", new CultureInfo("sv-SE")).Substring(0, 2);
    <label style="padding-left: 10px">
        <input type="checkbox" id="selectedId" name="isoDate" value="@isoDate"/>@day-@isoDate
    </label>
}

It doesn't work, it will still only select those 3 check-boxes on the top of the page. I would assume it would check all the check-boxes correct? It ends up like this:

ID should be unique, your HTML markup is wrong

ssilas777
– ssilas777

2015-08-31 08:59:35 +00:00
Commented Aug 31, 2015 at 8:59 — ssilas777
– ssilas777, Commented Aug 31, 2015 at 8:59

Bhushan Kawadkar · Accepted Answer · 2015-08-31 09:03:33Z

2

You are using selectedId as id instead of class like other checkboxes. Use it as class attribute as shown below

@foreach (var date in group)
{
    var isoDate = date.ToString("yyMMdd");
    var day = date.ToString("ddd", new CultureInfo("sv-SE")).Substring(0, 2);
    <label style="padding-left: 10px">
        <input type="checkbox" class="selectedId" name="isoDate" value="@isoDate"/>@day-@isoDate
    </label>
}

answered Aug 31, 2015 at 9:03

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

Asp.net jQuery works outside, but not inside foreach loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related