JQuery 复选框检查答案

【问题标题】：JQuery checkbox checkJQuery 复选框检查
【发布时间】：2013-08-27 14:29:09
【问题描述】：

假设我有 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");
    });
});

【问题讨论】：

为什么不使用单选按钮
那么三个不同的类怎么样？
@L10 - 指定的要求与单选按钮的功能不同，因为用户无法取消选中所有单选按钮。
@nnnnnn - 是的，这是真的......但 OP 要求只选择一个......所以我建议这样做。

标签： jquery html checkbox

【解决方案1】：

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

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

【讨论】：

你应该这样做或单选按钮。避免我在下面的答案中出现的复选标记闪烁。

【解决方案2】：

回答第 1 部分：这正是单选按钮的设计目的，默认情况下它们具有这种行为。

回答第 2 部分：点击函数应如下所示：

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

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

});

【讨论】：

指定的要求与单选按钮的作用不完全一样，因为单选按钮用户无法取消选中所有单选按钮。
好点，虽然他没有指定用户应该能够取消选中所有这些，但这会有所不同。

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

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

【讨论】：

单击标签会触发相关输入上的单击事件（尽管如您所述，OP 的标签未关联）。

【解决方案4】：

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

【讨论】：