HTML复选框，每组一次选择一个

Question

我一直在尝试一些代码，以便一次可以选中1个复选框，但是我也希望能够一次在另一个组中一次选中1个复选框（它们一起工作）

到目前为止，这是我尝试过的代码：

HTML

复选框组1

                <div class="modal-body">
                Status to change:
                <br><br>
                <label for=".checkboxSanction">Sanction Status
                    <input type="checkbox" name="statusbox" value="Sanction Status" class="checkboxSanction">
                </label><br>
                <label for=".checkboxPep">Pep Status
                    <input type="checkbox" name="statusbox" value="PEP Status" class="checkboxPep">
                </label><br>
                <label for=".checkboxUnderage">Underage Status
                    <input type="checkbox" name="statusbox" value="Underage Status" class="checkboxUnderage">
                </label><br><br>
                Change status to:

复选框组2

                <label for=".checkboxInvestigating">Investigating
                    <input type="checkbox" name="valuebox" value="2" class="checkboxInvestigating">
                </label></br>
                <label for=".checkboxClosed">Closed
                    <input type="checkbox" name="valuebox" value="10" class="checkboxClosed">
                </label>
            </div>

jQuery的

    $("input:checkbox").on('click', function () {
    var $box = $(this);
    if ($box.is(":checked")) {
        var group = "input:checkbox[name='" + $box.attr("name") + "']";
        $(group).prop("checked", false);
        $box.prop("checked", true);
    } else {
        $box.prop("checked", false);
    }
});

这里的问题是我一次只能选中1个框，并且所有复选框都适用（就像在两个组中一样）- 我希望每个组都可以选中1个框。

有谁知道如何解决这个问题？ 感谢您的帮助！

Answer 1

尝试这个

$("input:checkbox").on('click', function() {
    $("input:checkbox[name='"+$(this).attr('name')+"']").not($(this)).prop('checked', false);
});

与您的示例相同的概念更加简洁。

的jsfiddle

编辑：我刚刚正确检查了您的示例，它也可以正常工作，请参见此处

JSFiddle为您的代码