jquery - JQuery 复选框检查

Question

假设我有 3 个复选框（一、二、三）。现在我希望如果我单击复选框 1，那么复选框 2 和 3 将取消选中。

另一个例子：如果我点击复选框二，那么复选框一和三将取消选中。

如果我单击复选框三，那么复选框一和二将取消选中。

HTML

<input type="checkbox" class="check" value="one"><label>One</label>
<input type="checkbox" class="check" value="two"><label>Two</label>
<input type="checkbox" class="check" value="three"><label>Three</label>

jQuery

$(document).ready(function(){
    $(".check").click(function(){
        $(".check").attr("checked", "checked");
    } else {
        $(".check").removeAttr("checked");
    });
});

Answer 1

单选按钮更适合您要执行的操作。但是，如果您必须使用复选框，则应使用以下方法：

$(".check").click(function(){
    $(".check").not(this).prop("checked", false);
});

Answer 2

Answer Part 1: This is precisely what radio buttons were designed for, they have this behavior by default.

Answer Part 2: the click function should look like this:

$(".check").click(function(){

    $(".check").attr("checked", false);
    $(this).attr("checked",true);

});

Answer 3

对于一组仅要检查一个的选项，请使用单选按钮或单选框：

<input type="radio" name="check" value="one"><label>One</label>
<input type="radio" name="check" value="two"><label>Two</label>
<input type="radio" name="check" value="three"><label>Three</label>

如果你真的需要坚持你的复选框情况，你可以这样做：

$(".check").change(function(){
    $(".check").prop("checked", false);
    $(this).prop("checked", true)
});

请注意，我正在绑定到change事件，因为用户可能会单击标签或其他东西（在这种情况下，我不确定是否在复选框上触发了合成单击。）

附带说明：您的label元素缺少for属性。

Answer 4

$(document).ready(function() {
    var $cbs = $(".check").click(function() {
        $cbs.not(this).prop("checked", false);
    });
});