选中复选框 2 时取消选中复选框 1答案

【问题标题】：Uncheck checkbox 1 when checkbox 2 is checked选中复选框 2 时取消选中复选框 1
【发布时间】：2011-06-20 21:41:33
【问题描述】：

我有一个非常简单的问题 - 我正在思考 - 但我自己无法解决。

我有两个复选框：一个值为 Yes，另一个值为 No。

我需要某种脚本来帮助我在选中另一个时取消选中另一个。所以如果我选中复选框没有。 1 - 复选框编号。 2 自动取消选中 - 反之亦然。必须始终选中其中一个复选框 - 并且只有一个 -。不 - 在这种情况下我不能使用单选按钮。

如果可以在 jQuery 中完成，那就太好了 - 但任何帮助都可以：)

提前致谢

罗伯特

【问题讨论】：

为什么不能使用单选按钮？这正是他们的设计目的。
“不，在这种情况下我不能使用单选按钮。” - 详细说明。
如果你不能使用单选按钮，那么我猜你的分析有问题，因为你想要的正是单选按钮的行为。你应该退后一步，想想为什么你不能使用单选按钮。不要重新发明轮子。
因为我需要隐藏“否”复选框，因为用户不应该看到它。我可以使用单选按钮，但如果用户随后激活“是”并决定他想要撤消他不能撤消，因为没有按钮不可见。

标签： jquery checkbox checked unchecked

【解决方案1】：

我能想到的最简单的方法是：

$('input:checkbox').change(
    function(){
        var group = this.name;
        $(this).siblings('input:checkbox[name="'+ group + '"][checked]').removeProp('checked');
    });

JS Fiddle demo.

但是有一些警告，上面使用了removeProp()，它仅限于 jQuery 1.6（大概以及更高版本）。在 1.6 之前，应该可以替换为 removeAttr('checked')。

不过，请重新考虑使用 <input type="radio" /> 元素，这正是它们旨在处理和使用的内容。

编辑以下 Robert 的评论（在 cmets 中，如下）：

我按计划完成了这项工作，但是...在我的表单中，我有另一组复选框，它们也受到限制，尽管它们的名称完全不同。但我需要用户能够选择多个这些复选框。似乎该脚本会影响所有复选框组。我实际上认为通过输入 name="'+ group +'" 可以将功能限制为那些名称以“group”开头的复选框。但似乎并非如此。

分配change 事件处理程序的选择器是$('input:checkbox')，它选择/应用于页面上的所有个复选框。

要将其仅应用于特定组中的那些复选框，您可以使用：

$('input:checkbox[name="checkboxGroupName"]').change(
    function(){
        $(this).siblings().removeProp('checked');
    });

参考资料：

【讨论】：

嗨，大卫。非常感谢。我按计划完成了这项工作，但是……在我的表格中，我有另一组复选框，尽管它们的名称完全不同，但它们也受到了限制。但我需要用户能够选择多个这些复选框。似乎该脚本会影响所有复选框组。我实际上认为通过输入 name="'+ group +'" 可以将功能限制为那些名称以“group”开头的复选框。但情况似乎并非如此。

【解决方案2】：

$("#checkbox1").bind('click', function(){ $("#checkbox2").removeAttr('checked'); });
$("#checkbox2").bind('click', function(){ $("#checkbox1").removeAttr('checked'); });

【讨论】：

【解决方案3】：

    $('#checkbox_1').change(function() {

        if ($(this).is(':checked')) {
            $('#checkbox_2').prop('checked', false);
        }
        else {
            $('#checkbox_1').prop('checked', false);
            $('#checkbox_2').prop('checked', true);
        }
    });

    $('#checkbox_2').change(function() {

        if ($(this).is(':checked')) {
            $('#checkbox_1').prop('checked', false);
        }
        else {
            $('#checkbox_2').prop('checked', false);
            $('#checkbox_1').prop('checked', true);
        }
    });

编辑：现在应该可以工作了:-)

【讨论】：

您好，托尔斯滕。非常感谢。 #checkbox_1 和#checkbox_2，它们与我的复选框有什么关系？ ID？姓名？我有这两个：那么我会在您的代码中添加什么而不是#checkbox_1 和#checkbox_2。是的，我知道我是个彻头彻尾的白痴:)
在整个代码中将“checkbox_1”替换为“contact_yes”，将“checkbox_2”替换为“contact_no”就足够了。

【解决方案4】：

function ChkBoxClicked() {
    $("#chkBoxList_0").bind('click', function () { $("#chkBoxList_1").removeAttr('checked'); });
    $("#chkBoxList_1").bind('click', function () { $("#chkBoxList_0").removeAttr('checked'); }); 

    if (($('#chkBoxList_0').is(':checked')) || ($('#chkBoxList_1').is(':checked'))) {
        if ($('#chkBoxList_0').is(':checked')) { alert('chkBoxList_0'); return false; }
        if ($('#chkBoxList_1').is(':checked')) { alert('chkBoxList_1'); return false; }
    } else {
        alert('non of the chkBoxList'); return false;
    }
}

我就是这样做的

【讨论】：

【解决方案5】：

$( document ).ready(function() {
    $( ".checkbox1" ).click(function(event) {
    $(this).parents('tr').children('td').children('.todos').prop('checked', false); 
    });
    $( ".checkbox2" ).click(function(event) {
        $(this).parents('tr').children('td').children('.checkbox1').prop('checked', false); 
    });

这基本上表明，当复选框 1 被选中，并且用户尝试选中复选框 2 时，复选框 1 将被取消选中。

【讨论】：