Question

我有一个foreach循环创建CheckBox es，导致它们都具有相同的ID。我有一些CSS，但是当你检查任何一个框时它会把css放到第一次迭代中，我如何添加一些动态ID类的东西才能将css添加到所选的框？

循环：

@foreach (var item in Model.Where(p => p.UserTable.ID == ViewBag.UserTableID))
{
    <tr>
        <td>
            <div class="select">
                <input type="checkbox" id="select" name="" />
                <label for="select"></label>
            </div>

的CSS：

.select {
width: 20px;
position: relative;
}

.select label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background: #eee;
    border: 1px solid #ddd;
}

    .select label:after {
        opacity: 0.2;
        content: '';
        position: absolute;
        width: 9px;
        height: 5.5px;
        background: transparent;
        top: 4.8px;
        left: 5.4px;
        border: 3px solid #333;
        border-top: none;
        border-right: none;
        transform: rotate(-45deg);
    }

.select label:hover::after {
opacity: 0.5;
}

.select input[type=checkbox]:checked + label:after {
opacity: 1;
}

Answer 1

为什么不直接为每个元素分配他们的项目ID？

<div class="select">
    <input type="checkbox" id="select_@item.ID" />
    <label for="select"></label>
</div>

除非您在该列表中有重复项，否则它们将始终是唯一的。

顺便说一句：您的视图不应该过滤掉项目，应该只给出它需要的项目（Where应该在数据库级别完成）

.NET / CSS Foreach复选框单独样式

1 个答案: