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')。

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

<小时/> 编辑以下罗伯特的评论（在下面的评论中）：

我按计划工作了，但是...在我的表格中我有另一组复选框，他们也得到了限制，尽管他们有完全不同的名字。但我需要用户能够选择多个复选框。好像脚本会影响所有复选框组。我实际上认为通过输入name =“'+ group +'”，可以将函数限制为名称以“group”开头的复选框。但情况似乎并非如此。

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

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

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

参考文献：

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。

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

5 个答案: