点击复选框获取CSHTML循环生成的特定Box元素的方法咨询

循环渲染元素时，绝对不能使用重复的id（比如你代码里的id="knob"），这会导致DOM选择器失效或误操作。下面给你两种可行的实现方案：

方案一：通过DOM遍历直接定位对应Box（简单直接） #

给每个复选框绑定点击事件时传入自身元素，然后通过closest()方法向上找到所属的.box容器，再修改容器内的内容。

修改后的CSHTML代码 #

@foreach(var obj in Model)
{
    @* 原代码里的PN列表未使用，可按需保留或删除 *@
    @if (obj.ComponentNumber == 3391012471)
    {
        <div class="box">
            <div class="parent">
                <h3 class="column inline-block-column">PN - @obj.ComponentNumber </h3>
                <l class="circle-comp column1 inline-block-column" style="@ViewBag.check2"></l>
            </div>
            <div>
                <p class="column desc-text">物料描述 - @obj.ComponentDescription</p> 
                <label class="switch">
                    <input type="checkbox" @ViewBag.check5 onclick="updateBoxContent(this)">
                    <span class="slider round"></span>
                </label>
            </div>
        </div>
    }
    else
    {
        <div class="box">
            <div class="parent">
                <h3 class="column inline-block-column">PN - @obj.ComponentNumber </h3>
                <l class="circle-comp column1 inline-block-column"></l>
            </div>
            <div>
                <p class="column desc-text">物料描述 - @obj.ComponentDescription</p>
                <label class="switch">
                    <input type="checkbox" onclick="updateBoxContent(this)" checked="checked">
                    <span class="slider round"></span>
                </label>
            </div>
        </div>
    }
}

对应的JavaScript函数 #

function updateBoxContent(checkbox) {
    // 找到当前复选框所属的.box容器
    const targetBox = checkbox.closest('.box');
    if (!targetBox) return;

    // 修改Box内的内容（示例：修改物料描述文本）
    const descElement = targetBox.querySelector('.desc-text');
    if (descElement) {
        const pn = targetBox.querySelector('h3').textContent.replace('PN - ', '');
        descElement.textContent = checkbox.checked 
            ? `物料描述 - 已选中 [${pn}]` 
            : `物料描述 - 未选中 [${pn}]`;
    }

    // 你可以在这里添加更多修改逻辑，比如修改circle-comp的样式等
}

方案二：事件委托（高效推荐） #

如果Box数量较多，给每个复选框绑定事件会浪费资源，推荐用事件委托：在父容器上绑定一次事件，通过事件冒泡判断点击的是复选框，再定位对应Box。

步骤1：给所有Box添加父容器 #

修改CSHTML，把循环的Box放在一个统一容器里：

<div id="box-container">
    @foreach(var obj in Model)
    {
        @if (obj.ComponentNumber == 3391012471)
        {
            <div class="box" data-pn="@obj.ComponentNumber">
                <div class="parent">
                    <h3 class="column inline-block-column">PN - @obj.ComponentNumber </h3>
                    <l class="circle-comp column1 inline-block-column" style="@ViewBag.check2"></l>
                </div>
                <div>
                    <p class="column desc-text">物料描述 - @obj.ComponentDescription</p> 
                    <label class="switch">
                        <input type="checkbox" @ViewBag.check5>
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
        }
        else
        {
            <div class="box" data-pn="@obj.ComponentNumber">
                <div class="parent">
                    <h3 class="column inline-block-column">PN - @obj.ComponentNumber </h3>
                    <l class="circle-comp column1 inline-block-column"></l>
                </div>
                <div>
                    <p class="column desc-text">物料描述 - @obj.ComponentDescription</p>
                    <label class="switch">
                        <input type="checkbox" checked="checked">
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
        }
    }
</div>

步骤2：添加事件委托的JavaScript代码 #

// 给父容器绑定change事件（复选框状态变化触发）
document.getElementById('box-container').addEventListener('change', function(e) {
    // 判断触发事件的元素是复选框
    if (e.target.type !== 'checkbox') return;

    // 找到对应Box
    const targetBox = e.target.closest('.box');
    const pn = targetBox.dataset.pn;

    // 修改Box内容示例
    const descElement = targetBox.querySelector('.desc-text');
    descElement.textContent = e.target.checked 
        ? `物料描述 - 已选中 PN: ${pn}` 
        : `物料描述 - 未选中 PN: ${pn}`;
});

关键注意事项 #

1. 永远不要在循环中生成重复的id属性，这违反HTML规范，会导致选择器异常。
2. closest()方法可以精准向上查找最近的指定父元素，兼容性良好（支持IE11及以上）。
3. 事件委托方案适合大量动态生成的元素，性能更优。

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