单击单选按钮时选中复选框答案

【问题标题】：Make a checkbox checked when a radio button is clicked单击单选按钮时选中复选框
【发布时间】：2012-05-13 15:29:33
【问题描述】：

假设我有这组单选按钮

radio 1
radio 2
radio 3
radio 4

还有一个复选框；

checkbox 1

我想要实现的是，当我单击收音机 1 或收音机 3 时，复选框 1 将被选中。如果复选框被选中并且当您单击单选 2 或单选 4 时，该复选框将被取消选中。

我已经为它实现了一些代码，但它有一个小故障，当我点击收音机 1 时，它会选中复选框，但当我点击收音机 3 时，它会取消选中复选框。

据说，当我点击收音机 1 时，它会选中，即使我点击收音机 3，它也不应该取消选中复选框。

这是我的代码：

jQuery('#radio1 input:radio, #radio3 input:radio').click(function(){
    var checkbox = jQuery('#checkbox1');
    checkbox.attr('checked', !checkbox.attr('checked'));
});

【问题讨论】：

标签： javascript jquery checkbox radio-button

【解决方案1】：

$('input[type="radio"]').click(function(){
   var checkbox = $('#checkbox1');
   switch(this.id){
      case 'radio1':
      case 'radio3':
      checkbox.attr('checked', true);
      break;

      case 'radio2':
      case 'radio4':
      checkbox.attr('checked', false);
      break;
   }
});

【讨论】：

你建立的逻辑没有区别。我认为第一个函数应该静态设置检查为真或假，而不是复制和粘贴函数，第二个函数应该静态设置与第一个功能相反的检查属性。目前，无论用户真正点击什么，您的代码都将继续切换复选框。
确实它更类似于预期的解决方案:)

【解决方案2】：

jQuery('#radio1, #radio3').click(function(){
    jQuery('#checkbox1').prop('checked', true);
});

jQuery('#radio2, #radio4').click(function(){
    jQuery('#checkbox1').prop('checked', false);
});

尽管您可以通过许多其他方式做到这一点。再举一个例子：

jQuery(':radio').change(function(){
    var toCheck = this.id == 'radio1' || this.id == 'radio3'; 
    jQuery('#checkbox1').prop('checked', toCheck);
});

Demo（标记取自@Matrix）

【讨论】：

@Jetoox。哎呀。那么checkbox1 是个坏名字... :) 修复谢谢！
这行不通。我试过了，很明显你错过了“#radio1 input:radio”，但它不起作用
@Jetoox。不，您可能对 HTML-DOM 有问题。 input:radio 是个错误。
我明白了。对不起。我不太精通 HTML-DOM。我的错。 :)
@Jetoox。可以看demo

【解决方案3】：

HTML 代码：

Radio1 :<input type="radio" id="radio1" name="radio"/><br>
Radio2 :<input type="radio" id="radio2" name="radio"/><br>
Radio3 :<input type="radio" id="radio3" name="radio"/><br>
Radio4 :<input type="radio" id="radio4" name="radio"/><br>
Checkbox :<input type="checkbox" id="checkbox1"/>

jQuery 代码：

 jQuery('#radio1 , #radio3').click(function(){      
jQuery('#checkbox1').attr('checked', true);   
 });        
jQuery('#radio2 , #radio4').click(function(){      
 jQuery('#checkbox1').attr('checked', false);  
 });

现场演示：

http://jsfiddle.net/hQbpZ/

【讨论】：

attr => '检查' VS prop => 真的。