JQuery复选框检查

Question

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

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

如果我点击复选框3，则复选框1和2将取消选中。

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

答案第1部分：这正是单选按钮的设计目的，默认情况下会出现这种情况。

答案第2部分：点击功能应如下所示：

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

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

});

Answer 3

对于只需要检查一个选项的一组选项，请使用radio buttons或single-select box：

<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事件，因为用户可能会点击标签或其他内容（我不确定在这种情况下是否在复选框上触发了合成点击。）< / p>

旁注：您的label元素缺少for个属性。

Answer 4

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