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

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

这是我迄今为止尝试过的代码：

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:

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

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

试试这个

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

与您的示例相同的概念只是更简洁一点

编辑：我刚刚正确地检查了您的示例，效果也很好，请参见此处

---

为什么不使用单选按钮？@AdamAzad我希望用户也能够取消选中按钮您可以使用单选按钮（取消选中按钮）too@Dr考克斯：是的，但你想在每组中至少选择一个选项。所以单选按钮对你很有用。@YoYo我认为使用不可选择的单选按钮并不是你想在网页设计中使用的方式。当我看到单选按钮时，我通常确信我无法取消选中它们，因为这是它们的常见行为。不要造成不一定会发生的混乱嗯，它在你的小提琴上可以正常工作，但在我的应用程序中不行，模态对话框与此有关吗？我不明白为什么会产生干扰，它根本不起作用还是不允许你为每个组选择一个？检查控制台是否存在任何其他错误。你也可以让你的输入：复选框选择器更精确地连接点击处理程序。在应用程序中尝试时也是一样的问题，我无法为每个组选择一个。我不记得出了什么问题，但在应用程序中进行了一些修改后，这起到了作用，我会接受你的答案，因为我一直在使用它，谢谢你，好先生！：）别担心，听起来好像有什么别的事干扰了。干得好

    $("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);
});