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

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

尝试更改行以在选择器表达式中使用单击单选的名称属性

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

您只需要清除同一组其他收音机上的“已检查”标志。

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

});