如何在 Jquery 中设置两个互斥的复选框？

Question

$(document).ready(function() {
            $("input:txtAge1").click(function(event) {
                if ($(txtAge1).attr("checked") == true) {
                    $(txtAge2).attr("checked", "unchecked");
                    $(txtAge2).attr("checked") == false)
                } 

                if ($(txtAge2).attr("checked") == true) {
                    $(txtAge1).attr("checked", "unchecked");
                    $(txtAge1).attr("checked") == false)
                }
            });
});



<input type="checkbox" id="txtAge1" name="option1" value=""/>21<br>
<input type="checkbox" id="txtAge2" name="option2" value=""/>55<br> 

我正在尝试选择一个复选框或另一个。因此，如果未选中其中一个框，则要么不允许，要么强制 要选中其他框...换句话说，强制执行其中之一，但绝不允许 “未定义”条件

Answer 1

$("input[type=checkbox]").click(function () {
        $(this).siblings().prop("checked", false);
 })

Answer 2

也许我把这个问题简化了一点，但为什么不尝试使用单选按钮呢？

您可以将其中一个设置为select，以避免用户提交空值。

更新：由于您的客户需要复选框，因此这里有一个 jQuery 解决方案：

$(document).ready(function(){
   $('.radioButton').click(function() {
      $('.radioButton').prop("checked", false);
      $(this).prop("checked", true);
   });
});

这就是 jQuery 代码。您应该像这样设置输入框：

<input type="checkbox" id="txtAge1" class="radioButton" name="option1" value=""/>21
<input type="checkbox" id="txtAge2" class="radioButton" name="option2" value=""/>55

这应该可行，但未经测试。我可能错过了什么。

Answer 3

一种解决方案是添加两个单击事件，每个复选框一个。当其中一个被单击时，另一个将被取消单击。

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

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

Answer 4

我最近遇到了这个问题，除了我需要复选框而不是单选按钮，因为需要取消选中这两个选项。我用这样的东西解决了它（适应OP的代码）：

<input type="checkbox" id="txtAge1" />21
<input type="checkbox" id="txtAge2" />55

$(document).ready({
    $("#txtAge1").click(function() {
        if($("#txtAge1").is(':checked')) {
            $("#txtAge2").prop('checked', false);
        }
    });
    $("#txtAge2").click(function() {
        if($("#txtAge2").is(':checked')) {
            $("#txtAge1").prop('checked', false);
        }
    });
)};

可能不是那么漂亮，但它有效。

Answer 5

我还想指出这个优秀的链接 http:// rndnext.blogspot.com/2009/08/mutually-exclusive-html-select-elements.html 此处。

但需要注意的是，我用它来互斥 div 内两个动态生成的选择列表。 。由于要操作的内容在页面加载时不可用，因此它无法按预期工作。以下解决方案位于 jQuery - 选择动态创建的 div 有助于解决该问题。

Answer 6

我会使用这个功能。允许互斥并允许取消选中：

$('#divId').find(':checkbox').click(function() {
         var state=$(this).prop("checked");
         $(':checkbox').prop("checked", false);
         $(this).prop("checked", state);
    });