我有很多相同的<div class="checkbox product-option">
,其中每四个 div 确实属于彼此。
所以1-4是一组,5-8是一组等等。
有没有办法只允许选择一组中的 1 个复选框?
我目前有这个代码,但它适用于所有复选框,而不适用于四人一组。
jQuery:
$('input[type="checkbox"]').on('change', function() {
$('input[type="checkbox"]').not(this).prop('checked', false);
});
HTML:
<div class="checkbox product-option">
<label for="addon1">
<span class="product-option-text">
<input class="checkbox-row" type="checkbox" name="addons[1]" id="addon1" onclick="prodconfrecalcsummary()">
<span class="text">Text</span>
</span>
</label>
</div>
<div class="checkbox product-option">
<label for="addon11">
<span class="product-option-text">
<input class="checkbox-row" type="checkbox" name="addons[11]" id="addon1" onclick="prodconfrecalcsummary()">
<span class="text">Text</span>
</span>
</label>
</div>
<div class="checkbox product-option">
<label for="addon12">
<span class="product-option-text">
<input class="checkbox-row" type="checkbox" name="addons[21]" id="addon1" onclick="prodconfrecalcsummary()">
<span class="text">Text</span>
</span>
</label>
</div>
<div class="checkbox product-option">
<label for="addon54">
<span class="product-option-text">
<input class="checkbox-row" type="checkbox" name="addons[54]" id="addon1" onclick="prodconfrecalcsummary()">
<span class="text">Text</span>
</span>
</label>
</div>
最佳答案
如果您只想在每个组中选择一个项目,那么您应该使用单选按钮而不是复选框。然后用户就会期望并理解只有一项是可选的。如果您创建一系列具有相同“名称”属性的单选按钮,那么浏览器将自动只允许选择其中一个。
如果您使用复选框,那么即使您使用 javascript 来实现您的建议,您的用户也可能会感到困惑,因为复选框的正常使用是允许同时选择多个项目。
关于javascript - 仅选择一组中的一个复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37661168/