当用户选中复选框时，我目前正在使用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>   100kms per day  <input id="defaultOpen" type="checkbox" class="slectOne" data-id="R @item.standard_100 per day" /> Standard Cover     <input type="checkbox" class="slectOne" data-id="R @item.super_100 per day" /> 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>   200kms per day  <input type="checkbox" class="slectOne" data-id="R @item.standard_200 per day" /> Standard Cover     <input type="checkbox" class="slectOne" data-id="R @item.super_200 per day" /> 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>   400kms per day  <input type="checkbox" class="slectOne" data-id="R @item.standard_400 per day" /> Standard Cover     <input type="checkbox" class="slectOne" data-id="R @item.super_400 per day" /> 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>
屏幕截图如下：
屏幕截图01
正如您从屏幕截图中看到的，所有复选框都分组在一起。如何创建一个新组，使每条记录都有自己的分组，并且不与其他记录共享复选框，以及如何允许这些复选框激活/操作其自己的段落标记，而不仅仅是第一条记录的段落标记？
非常感谢您的帮助
用class="result"替换剃刀foreach中的id="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的每个元素分配样式和/或行为(。
即使从技术上讲是非法的，也有可能使用querySelectorAll:运行共享同一id的多个元素
document.querySelectorAll("#someId").forEach(el => el.style.color = 'red');
但这并不意味着在DOM中多次拥有相同的id是合法的。假设上面的方法有效，这样您就可以用程序选择所有非法元素，并将其id更改为唯一元素，从而使标记有效。