Change color on checkbox change in Razor-CodePudding

I want to populate a foreach loop in Razor with a checkbox. When the checkbox is checked the color of the table row should change. But i'm new to Razor pages and can't figure out how to achieve this. I made a javascript function that should fire when a checkbox is checked or unchecked but it will only enter the else part of the if statement.

 <div >
    <table >
        @{var id = 0;}
        @foreach (var item in Model.PieceViewItems)
        {
            id  ;
            <tr>
                <td>@id</td>
                <td><label>@item.PartDescription</label> <br /> @item.PartId (@item.StatusCode)</td>
                <td>@item.Supplier</td>
                <td style="width: 100px !important">@item.TijdOpO3 @if (item.TijdOpO3 == "1")
                {<text>dag</text>}
            else
            { <text>dagen</text>} </td>
                <td>@item.KeurCode</td>
                <td>@item.PromiseDate</td>
                <td>@item.WidthAndPartType</td>
                <td>@item.PieceLengthWithUnit <br /> @item.NrOfPieces @if (item.NrOfPieces == 1)
                {<text>rol</text> }
            else
            { <text>rollen</text>} </td>
                <td>@if (item.NumberReceived == "0")
                {<text>NIEUW</text> }
            else
            { @item.NumberReceived}</td>
                <td>@item.VoorraadQty m</td>
                <td style="width: 100px !important">@item.SalesOrderQty m <br /> @item.NrOfSalesOrders @if (item.NrOfSalesOrders == 1)
                {<text>order</text>}
            else
            {<text>orders</text>} </td>
                <td style="width: 100px !important">@item.StalenOrdersQty m <br /> @item.NrOfStalenOrders @if (item.NrOfStalenOrders == 1)
                {<text>order</text>}
            else
            {<text>orders</text>} </td>
                <td><input type="checkbox" id="IsChecked" style="width:30px;height:30px;margin-left:20px;margin-top:20px"> </td>
            </tr>
        }
    </table>
</div>
<script type="text/javascript">
    $(function () {

        $("#IsChecked").click(function () {
            var checked = $(this).attr("checked");
            if (checked) {
                alert("Checked")
            }
            else {
                alert("UnChecked")
            }
        });
    });
</script>

CodePudding user response：

Id should be unique,you can try to set name attribute and change your js.Here is a demo: html:

<div >
    <table >
        @{var id = 0;}
        @foreach (var item in Model.PieceViewItems)
        {
            id  ;
            <tr>
                <td>@id</td>
                <td><label>@item.PartDescription</label> <br /> @item.PartId (@item.StatusCode)</td>
                <td>@item.Supplier</td>
                <td style="width: 100px !important">@item.TijdOpO3 @if (item.TijdOpO3 == "1")
                {<text>dag</text>}
            else
            { <text>dagen</text>} </td>
                <td>@item.KeurCode</td>
                <td>@item.PromiseDate</td>
                <td>@item.WidthAndPartType</td>
                <td>@item.PieceLengthWithUnit <br /> @item.NrOfPieces @if (item.NrOfPieces == 1)
                {<text>rol</text> }
            else
            { <text>rollen</text>} </td>
                <td>@if (item.NumberReceived == "0")
                {<text>NIEUW</text> }
            else
            { @item.NumberReceived}</td>
                <td>@item.VoorraadQty m</td>
                <td style="width: 100px !important">@item.SalesOrderQty m <br /> @item.NrOfSalesOrders @if (item.NrOfSalesOrders == 1)
                {<text>order</text>}
            else
            {<text>orders</text>} </td>
                <td style="width: 100px !important">@item.StalenOrdersQty m <br /> @item.NrOfStalenOrders @if (item.NrOfStalenOrders == 1)
                {<text>order</text>}
            else
            {<text>orders</text>} </td>
                <td><input type="checkbox" name="IsChecked" style="width:30px;height:30px;margin-left:20px;margin-top:20px"> </td>
            </tr>
        }
    </table>
</div>

js:

<script type="text/javascript">
   $("input[name='IsChecked']").change(function () {
            var checked = this.checked;
            if (checked) {
                alert("Checked")
            }
            else {
                alert("UnChecked")
            }
        });
</script>