Razor中实现复选框切换时修改表格行颜色

原代码存在的问题 #

• 重复ID：foreach循环里所有复选框共用id="IsChecked"，HTML要求ID唯一，导致仅第一个复选框能触发事件。
• 状态判断错误：attr("checked")获取的是元素初始属性，而非当前实时勾选状态，所以永远进入else分支。
• 未关联表格行：没有将复选框与所在行绑定，无法实现行颜色切换。

修改后的完整代码 #

<style>
    /* 定义选中行的样式，可自定义颜色 */
    .selected-row {
        background-color: #d4edda;
    }
</style>

<div class="Table">
    <table class="table table-striped TableData">
        @{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>
                <!-- 把重复的ID换成class，确保每个复选框都能被选中 -->
                <td><input type="checkbox" class="row-checkbox" style="width:30px;height:30px;margin-left:20px;margin-top:20px"> </td>
            </tr>
        }
    </table>
</div>

<script type="text/javascript">
    $(function () {
        // 给所有带row-checkbox类的复选框绑定点击事件
        $(".row-checkbox").click(function () {
            // 用prop获取当前复选框的实时勾选状态
            var isChecked = $(this).prop("checked");
            // 通过closest找到当前复选框所在的表格行
            var targetRow = $(this).closest("tr");

            if (isChecked) {
                targetRow.addClass("selected-row");
            } else {
                targetRow.removeClass("selected-row");
            }
        });
    });
</script>

关键修改说明 #

1. 替换ID为Class：将复选框的id="IsChecked"改为class="row-checkbox"，避免ID重复，确保所有复选框都能触发事件。
2. 正确判断勾选状态：使用prop("checked")替代attr("checked")，获取复选框的实时状态。也可以直接用this.checked，效果相同。
3. 关联表格行：通过closest("tr")找到当前复选框所在的表格行，再通过添加/移除CSS类来切换行背景色。
4. 自定义选中样式：添加<style>标签定义selected-row类的背景色，可根据需求修改颜色值。

内容的提问来源于stack exchange，提问作者Proliges