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

HTML checkbox select one at a time per group

本文关键字：一个 选择 HTML 复选框      更新时间：2023-09-26

我一直在尝试一些代码，以便能够一次选中一个复选框，但我也希望能够同时在另一组中一次选中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);
    }
});

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

有人知道如何解决这个问题吗？谢谢你的帮助！

试试这个

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

与你的例子相同的概念只是更简洁一点。

JSFiddle

编辑：我刚刚正确检查了您的示例，它也很好，请参阅此处

用于代码的JSFiddle

相关文章：