组中仅选中一个复选框

Question

我有很多相同的<div class="checkbox product-option"> ，其中每个四个div都属于彼此。

所以1-4是一组，5-8是一组，依此类推。

有没有一种方法可以只选择一个组中的一个复选框？

我目前有此代码，但适用于所有复选框，而不适用于四个一组。

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来实现建议的功能，您的用户也可能会感到困惑，因为复选框的正常使用是允许同时选择多个项目。

Answer 2

您可以使用id进行选择，然后更改您的jquery代码$('#yourIdHere').on('change', function() { //Whatever your code... });

Answer 3

这是？ 把CSS选择器

$('input[type="checkbox"].checkbox.product-option').on('change', function() {
    $('input[type="checkbox"].checkbox.product-option').not(this).prop('checked', false);
});

是相同的代码，但具有CSS选择器。