Jquery检查键上的单选按钮答案

【问题标题】：Jquery check radio button on keyupJquery检查键上的单选按钮
【发布时间】：2011-09-17 10:37:09
【问题描述】：

我设置了两个单选按钮，我想要的是，如果我在第一次设置时选择是，它应该自动选择另一个，因为这是我的代码

<input type="checkbox" name="saver" value="yes" id="saver"> Yes 
<input type="checkbox" name="saver" value="no" id="saver"> No 

<input type="checkbox" name="sendmail" value="yes" id="sendmail"> Yes
<input type="checkbox" name="sendmail" value="no" id="sendmail"> No

所以我想要的是，如果我在第一组选择“是”，它应该在第二组自动选择“是”，Jquery 就在这里

$('#saver').keyup(function(){
   var checkbox_value = $('#saver:checked').val();

   if(checkbox_value == 'yes')
   {
      $('input[name="sendmail"]').attr('checked', true);
   }
});

它确实会自动选择另一组，但它会选择“否”而不是“是”

【问题讨论】：

标签： jquery onkeyup

【解决方案1】：

您的 HTML 需要使用唯一 ID

<input type="checkbox" name="saver" value="yes" id="saver-yes"> Yes 
<input type="checkbox" name="saver" value="no" id="saver-no"> No 

<input type="checkbox" name="sendmail" value="yes" id="sendmail-yes"> Yes
<input type="checkbox" name="sendmail" value="no" id="sendmail-no"> No

这个 javascript 很简单（并且有效 - 见证明：http://jsfiddle.net/kSVx7/1/）

$('#saver-yes').change(function() {

  if($('#saver-yes:checked').val() == 'yes')
     $('#sendmail-yes').attr('checked', true);


});

通过使用 change 而不是 keyup，您还可以对鼠标点击（甚至触摸事件）进行操作。

通过引用唯一的 id，您所引用的元素没有歧义，因此 jQuery 知道要操作什么。

【讨论】：

【解决方案2】：

试试这个 -

$('#saver').change(function() {
    var checkbox_value = $('#saver:checked').val();

    if (checkbox_value == 'yes') {
        $('input[name="sendmail"][value="yes"]').attr('checked', true);
    }
});

我已将“keyup”事件更改为“更改”，但如果您愿意，可以将其更改回“keyup”。

工作演示 - http://jsfiddle.net/XyKM7/

【讨论】：

【解决方案3】：

一个ID只能定义一次，你应该使用change而不是keyup。

http://jsfiddle.net/7hq2V/1/

HTML：

<input type="checkbox" name="saver" value="yes" id="saver-yes"> Yes 
<input type="checkbox" name="saver" value="no" id="saver-no"> No 

<input type="checkbox" name="sendmail" value="yes" id="sendmail-yes"> Yes
<input type="checkbox" name="sendmail" value="no" id="sendmail-no"> No

JS：

$('#saver-yes').change(function() {
    if ($(this,':checked')) {
        $('#sendmail-yes').attr('checked', true);
    }
});

【讨论】：

【解决方案4】：

有几件事...

如果每个复选框组中的值是互斥的，那么单选按钮将是语义上更正确的选择。

其次，设置值的脚本部分不仅针对“是”复选框，还针对整个组 - 您需要添加另一个过滤器来执行此操作：

$('input[name="sendmail"][value="yes"]').attr('checked', true)

如果您将它们保留为复选框，您还需要处理取消选中否框。

【讨论】：