如何选中另一组中的一组单选按钮时取消选中

时间:2016-07-16 12:27:35

标签: javascript jquery radio-button

我有两组单选按钮。单击组中的按钮时,应取消选中另一组中的任何按钮,反之亦然。 我试过下面只运行一次。 我认为最聪明的方法是click()。但我无法理解它。有什么建议吗?

function uncheckRadioBtnSet(){
  if ($('[name="a"]').is(':checked')){
    $('input[name="b"]').removeAttr('checked');
    $(this).off('click');
  }else{
    $('input[name="a"]').removeAttr('checked');
    $(this).off('click');
  }
}

$("input[name='a']").click(function(){
   uncheckRadioBtnSet();
});
$("input[name='b']").click(function(){
   uncheckRadioBtnSet();
});

<input type="radio" name="a"  value="1"><br>
<input type="radio" name="a" value="2"><br>
<input type="radio" name="a"  value="3"><br>

<h6> separator </h6>

<input type="radio" name="b" value="4"><br>
<input type="radio" name="b" value="5"><br>
<input type="radio" name="b"  value="6"><br>

3 个答案:

答案 0 :(得分:1)

试试这个nanocode:)

$("input[name='a'], input[name='b']").click(function(){
   $('input[name="'+{b: 'a',a: 'b'}[this.name]+'"]').prop("checked", false);
});

Plunker

根据新要求更新了代码

$("input[name='item_meta[313]'], input[name='item_meta[314]']").click(function(){
   $('input[name="'+{'item_meta[313]' : 'item_meta[314]', 'item_meta[314]' : 'item_meta[313]'}[this.name]+'"]').prop("checked", false);
});

但是,为了便于阅读,您还可以将此代码编写为:

var obj = {
  'item_meta[313]' : 'item_meta[314]', 
  'item_meta[314]' : 'item_meta[313]'
}
$("input[name='item_meta[313]'], input[name='item_meta[314]']").click(function(){
   $('input[name="'+obj[this.name]+'"]').prop("checked", false);
});

See this updated Plunker

答案 1 :(得分:0)

您可以使用:

$("input[name='a']").click(function(){
   $('input[name="b"]').prop("checked", false);
});
$("input[name='b']").click(function(){
   $('input[name="a"]').prop("checked", false);
});

演示:https://jsfiddle.net/iRbouh/xn61vs1q/

答案 2 :(得分:0)

如果我们为所有单选按钮使用相同的名称

,那就没问题了

<input type="radio" name="a"  value="1"><br>
<input type="radio" name="a" value="2"><br>
<input type="radio" name="a"  value="3"><br>
<h6>
separator
</h6>
<input type="radio" name="a" value="4"><br>
<input type="radio" name="a" value="5"><br>
<input type="radio" name="a"  value="6"><br>