仅选择组中的一个复选框

Question

我有很多相同的<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>

Answer 1

如果您只想在每个组中选择一个项目,那么您应该使用单选按钮而不是复选框.然后用户将期望并理解只有一个项目是可选择的.如果您创建一系列具有相同"名称"属性的单选按钮,则浏览器将自动仅允许选择其中一个.

如果您使用复选框,那么即使您使用javascript来实现您的建议,您的用户也可能会感到困惑,因为复选框的正常使用是允许同时选择多个项目.