HTML复选框每组选择一个

时间:2016-01-13 08:24:59

标签: javascript jquery html checkbox

我一直在尝试一些代码,以便能够一次检查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 个答案:

答案 0 :(得分:1)

试试这个

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

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

JSFiddle

编辑:我刚刚检查了您的示例,它也运行正常,请点击此处

JSFiddle for your code