Question

我当前正在使用jQuery来更改段落标记的值，因为用户选中了一个复选框，我面临的问题是当用户选中一个复选框时，只有第一条记录中的段落标记发生了变化，而其他什么都不做

MVC查看代码如下：

@foreach (var item in Model)
{
<div class="tabcolumn-container" style="height: 90px; border: 1px solid grey">

    <div class="tabcolumn30 frame" style="margin-top: 0px; margin-bottom: 0px;">
        <div style="height: 35px; background-color: grey;">
            <p style="font-size: 22px; font-weight: bold">@item.group_category</p>
        </div>
        <span class="helper">

            <img src="~/images/@item.image_path" />

        </span>
    </div>
    <div class="tabcolumn50">

        <div style="height: 40px; border-bottom: 1px solid grey; border-left: 1px solid grey; border-right: 1px solid grey">
            <p>&emsp;&emsp;&emsp;100kms per day&emsp;&emsp;<input id="defaultOpen" type="checkbox" class="slectOne" data-id="R @item.standard_100 per day" />&emsp;Standard Cover&emsp;&emsp;&emsp;&emsp;&emsp;<input type="checkbox" class="slectOne" data-id="R @item.super_100 per day" />&emsp;Upgrade to Super Cover</p>
        </div>

        <div style="height: 40px; border-bottom: 1px solid grey; border-left: 1px solid grey; border-right: 1px solid grey">
            <p>&emsp;&emsp;&emsp;200kms per day&emsp;&emsp;<input type="checkbox" class="slectOne" data-id="R @item.standard_200 per day" />&emsp;Standard Cover&emsp;&emsp;&emsp;&emsp;&emsp;<input type="checkbox" class="slectOne" data-id="R @item.super_200 per day" />&emsp;Upgrade to Super Cover</p>
        </div>

        <div style="height: 40px; border-bottom: 1px solid grey; border-left: 1px solid grey; border-right: 1px solid grey">
            <p>&emsp;&emsp;&emsp;400kms per day&emsp;&emsp;<input type="checkbox" class="slectOne" data-id="R @item.standard_400 per day" />&emsp;Standard Cover&emsp;&emsp;&emsp;&emsp;&emsp;<input type="checkbox" class="slectOne" data-id="R @item.super_400 per day" />&emsp;Upgrade to Super Cover</p>
        </div>

        <div style="height: 55px; display: table; border-left: 1px solid grey; background-color: grey; width: 569px; border-right: 1px solid grey">

        </div>

    </div>

    <div class="tabcolumn20" style="height: 160px">
        <p style="font-size: 15px; text-align: center">Pick-up location: In Branch</p>
        <p style="font-size: 15px; text-align: center">Fuel Policy: Full to Full</p>
        <p style="padding-left: 50px; font-size: 23px; font-weight: bold; margin-top: 24px" id="result">R @ViewBag.stand_100 per day</p>
        <input type="button" value="Book Now!" style="height: 56px; background-color: yellow; width: 227.66px; border-style: none"/>
    </div>
</div>
<br />
}

jQuery代码如下：

<script>
    $(document).ready(function () {
        $('.slectOne').on('change', function () {
            $('.slectOne').not(this).prop('checked', false);
            $('#result').html($(this).data("id"));
            if ($(this).is(":checked"))
                $('#result').html($(this).data("id"));
            else
                $('#result').html('');
        });
    });
</script>

截屏如下：

Screenshot01

从屏幕截图中可以看到，所有复选框都组合在一起。如何创建一个新组，以便每个记录都有自己的分组并且不与其他记录共享复选框，以及如何允许这些复选框激活/操纵自己的段落标签，而不仅仅是第一记录段落标签？ >

非常感谢您的帮助

Answer 1

将剃须刀id="result"中的foreach替换为class="result"，并将jQuery更改为：

$(document).ready(function () {
    $('.slectOne').on('change', function () {
        $('.slectOne').not(this).prop('checked', false);
        let result = $('.result', $(this).closest('.tabcolumn-container'));
        result.html($(this).is(":checked") ? $(this).data("id") : '');
    });
});

与此同时，您也可以从循环中删除id="defaultOpen"（重复的id在HTML中无效），并且，您可能还希望删除所有内联style和使用类对元素进行样式设置。它将使您的代码更整洁，更易于维护。

Ref：“对不起，我对jQuery还很陌生” ：
与jQuery无关。这是普通的HTML。在HTML中，重复的ID 无效。

DOM中基于

id的选择方法

.getElementById('#someId')

仅返回带有id="someId"的第一个元素，而完全忽略随后的元素。
元素中的 id 在DOM中应该是唯一的，它们是选择元素的最快方法。

<div id="foo">bar...</div>
<div id="foo">...tender => Only first item with same id is targeted. </div>
<script>
   document.getElementById("foo").style.color = 'red';
</script>

当您需要使用DOM元素集合时，应使用class属性，该属性是专门为此目的设计的（为具有class的每个元素分配样式和/或行为）。

从技术上讲，即使是非法的，也有可能使用id浏览多个共享同一querySelectorAll的元素：

 document.querySelectorAll("#someId").forEach(el => el.style.color = 'red');

但是在DOM法律中，并没有一次拥有相同的id。我们只是说上述方法有效，因此您可以以编程方式选择所有非法元素并将其id更改为唯一元素，从而使标记有效。

如何在MVC视图的foreach块中使用jQuery操作段落标签

1 个答案: