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

您只需清除同一组其他无线电上的“已检查”标记即可。

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

});

取消选中不是＆＃34;此＆＃34;的所有无线电。名称

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

});

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

3 个答案: