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

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

做了一个 fiddle :http://jsfiddle.net/filever10/ZUb65/