了解是否从使用循环创建的一组复选框中选中复选框

Question

我正在使用foreach循环创建复选框。在按钮单击时，创建的div 将循环播放。每个复选框都位于具有相同类的div 中。有 3 个div，每个都包含一个复选框，我想根据复选框的复选框将限制的值设置为true/false

@foreach (var item in Model.HealthRestrictions) {
<div class="form-group healthRestrictions">
<label>
<input type="hidden" value="@item.Id" class="healthresId">
<input type="checkbox" class="healthrs" name="healthcheck"value="true"/>
<span style="color:black" class="healthres">@item.Text</span>
</label>
</div>
}

$(".healthRestrictions").each(function() {
if ($(".healthrs:checked")) {
IsRestricted = true;
} else {
IsRestricted = false;
}
});

Answer 1

尝试下面的代码来检查复选框是否被选中。

在这里，您可以使用带有类healthRestrictions的div 下的.each复选框healthrs迭代带有类复选框。使用$(this)获取循环中当前复选框的实例，并使用is(':checked')获取 true 表示选中状态，获取 false 表示复选框的未选中状态

$(function(){
$('#result').on('click', function(){
var IsRestricted = false;
$(".healthRestrictions").each(function () {
var spanText = $(this).find('span.healthres').text();
var hiddenVal = $(this).find('input.healthresId').val();
console.log(spanText + "  " + hiddenVal);
if ($(this).find('.healthrs').is(":checked")) { // $(this) refers to current element 
IsRestricted = true;
console.log('true');
}
else {
IsRestricted = false;`enter code here`
console.log('false');
}
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group healthRestrictions">
<label>
<input type="hidden" value="@item.Id1" class="healthresId" value="1">
<input type="checkbox" class="healthrs" name="healthcheck"value="true"/>
<span style="color:black" class="healthres">@item.Text1</span>
</label>
</div>
<div class="form-group healthRestrictions">
<label>
<input type="hidden" value="@item.Id2" class="healthresId" value="2">
<input type="checkbox" class="healthrs" name="healthcheck"value="true"/>
<span style="color:black" class="healthres">@item.Text2</span>
</label>
</div>
<div class="form-group healthRestrictions">
<label>
<input type="hidden" value="@item.Id3" class="healthresId" value="3">
<input type="checkbox" class="healthrs" name="healthcheck"value="true"/>
<span style="color:black" class="healthres">@item.Text3</span>
</label>
</div>
<input type="button" id="result" value="  Click Me  ">