單擊單選按鈕時選中復選框

Question

我有這套單選按鈕，比如說

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

Answer 1

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/

Answer 2

$('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;
   }
});

Answer 3

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

演示 （標記來自@Matrix）