第二次点击清除/取消选择单选按钮

Question

我在创建的表单上有很多单选按钮。

我使用单选按钮而不是复选框的原因是因为我只想让用户选择一个或不选中。

单选按钮的坏处是，一旦被选中，它就不能被撤消。我试图添加第二次单击时清除一组收音机框的功能。

我正在执行的方法现在可以工作，如果我有一组单选按钮我想单独定位但不是如果我想为页面上的所有单选按钮组实现它。

当我使用多个单选按钮组时，当我尝试选择不同的选项时，它将随机取消选择一个单选按钮。

如果有人能帮助我，这将不胜感激。

JSFIDDLE for only one group of radio buttons（作品）

如果你改变这个代码，而不是和目标个人的名字，它的工作原理。

$('input[name="rad"]').click(function() 

JSFIDDLE for multiple groups of radio buttons（不工作）

我想能够针对一次我所有的单选按钮组，因为还有很多。

$(function(){ 
    $('input[type="radio"]').click(function(){ 
     var $radio = $(this); 

     // if this was previously checked 
     if ($radio.data('waschecked') == true) 
     { 
      $radio.prop('checked', false); 
      $radio.data('waschecked', false); 
     } 
     else 
      $radio.data('waschecked', true); 

     // remove was checked from other radios 
     $radio.siblings('input[name="rad"]').data('waschecked', false); 
    }); 
}); 

Answer 1

所以你只需要一种方法来检查/取消选中name组。

像这样的东西应该工作：

$('input[type="radio"]').on('click change', function() {//on click/change  
    $(this).prop('checked')//if checked 
    ? $(this).prop('checked',false).data('waschecked', false)//uncheck 
    : $(this).prop('checked',true).data('waschecked', true)//else check 
    .siblings('input[name="'+$(this).prop('name')+'"]').data('waschecked', false);//make siblings false 
}); 

保持万一.data('waschecked', ...)你需要有一个价值，但它的工作原理没有这样的：

$('input[type="radio"]').on('click change', function() {//on click/change  
    $(this).prop('checked')//if checked 
    ? $(this).prop('checked',false)//uncheck 
    : $(this).prop('checked',true);//else check 
}); 

做出了小提琴：http://jsfiddle.net/filever10/ZUb65/

Answer 2

尝试改变线使用点击电台的name属性中选择表达

$radio.siblings('input[name='+ $(this).attr('name') +']').data('waschecked', false); 

你只需要清除“waschecked”标志在同一组的其他无线电台。

http://jsfiddle.net/jammykam/BtLxY/15/

和公正的情况下，你需要使用的onchange目标：http://jsfiddle.net/jammykam/BtLxY/27/

$('input[type="radio"]').on('change', function(){ 
    var $radio = $(this); 

    // if this was previously checked 
    if ($radio.data('waschecked') == true) 
    { 
     $radio.prop('checked', false); 
     $radio.data('waschecked', false); 
    } 
    else 
     $radio.data('waschecked', true); 

    // remove was checked from other radios 
    $radio.siblings('input[name='+ $(this).attr('name') +']').data('waschecked', false); 
}); 

Answer 3

如果您使用的是简单的主次关系，然后尝试了这一点：

$('input[type="radio"][name="main_radios"]').on('change', function(){ 

    $('input[type="radio"][name="secondary_radios"]').prop('checked', false); 
    $('input[type="radio"][name="third_radios"]').prop('checked', false); 
    $('input[type="radio"][name="fourth_radios"]').prop('checked', false); 

    // combine it all into one call if you really feel like it 
    $('input[type="radio"][name="secondary_radios"], input[type="radio"][name="third_radios"], input[type="radio"][name="fourth_radios"]').prop('checked', false); 

}); 

取消选中所有不是“此”名称的收音机

// Listen for ANY radio to be changed 
$('input[type="radio"]').on('change', function(){ 

    // remember name of selected radio 
    var checked_name = $(this).attr('name'); 

    // target only radios that are not "this" name and uncheck them 
    $('input[type="radio"]').filter(function(){ 
     if($(this).attr('name') != checked_name){ 
      return true; 
     } 
     else{ 
      return false; 
     } 
    }).prop('checked', false); 

});