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

Question

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

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

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

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

提前感谢

罗伯特

Answer 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') 代替。

不过，请重新考虑使用 元素，这正是它们旨在处理的内容并与.

---

Edited following comment from Robert (in comments, below):

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

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

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

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

参考：

• :checkbox< /代码>。
• change()。
• siblings()。
• 属性等于选择器。
• removeProp()。

Answer 2

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

Answer 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);
        }
    });

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

Answer 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;
    }
}

我就是这样做的

Answer 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); 
    });

这基本上表明，当选中 checkbox1 且用户尝试选中 checkbox2 时，checkbox1 将被取消选中。