如何取消选中单选按钮？答案

【问题标题】：How to uncheck a radio button?如何取消选中单选按钮？
【发布时间】：2011-01-08 05:17:32
【问题描述】：

在使用 jQuery 提交 AJAX 表单后，我想取消选中一组单选按钮。我有以下功能：

function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).checked = false;  
  });
 }

借助此功能，我可以清除文本框的值，但无法清除单选按钮的值。

顺便说一句，我也试过$(this).val("");，但没用。

【问题讨论】：

你不需要 each 函数。你可以在 jQuery 对象上调用你想要的函数。请参阅下面的答案
不需要each()函数.. jQuery("input:radio").removeAttr("checked");

标签： javascript jquery radio-button dynamic-forms

【解决方案1】：

要么（纯js）

this.checked = false;

或 (jQuery)

$(this).prop('checked', false);
// Note that the pre-jQuery 1.6 idiom was
// $(this).attr('checked', false);

请参阅jQuery prop() help page，了解 attr() 和 prop() 之间的区别以及为什么 prop() 现在更可取的原因。
prop() 于 2011 年 5 月与 jQuery 1.6 一起引入。

【讨论】：

PPL，请注意，他的行为在 1.6 上发生了变化，有利于 prop()，而 .attr() 将仅限于实际属性
那么这里最好使用纯JS吗？
@Pete：我想说，如果你有一个基于 jQuery 构建的系统，那么给你带来的额外好处是，如果有一个浏览器可以以不同的方式处理这个问题，你将能够将浏览器支持委托给库。但是，如果您的软件当前不使用 jQuery，那么仅仅为此而实际包含库是不值得的。
@David Hedlund ：我想您是在暗示所有主流浏览器都以与今天相同的方式处理这个问题，对吧？
@qris：您的问题可能出在其他地方。 Simple demo, using jQuery 1.9。当然可以在我的 Chrome 中使用。

【解决方案2】：

您不需要each 函数

$("input:radio").attr("checked", false);

或者

$("input:radio").removeAttr("checked");

这同样适用于您的文本框：

$('#frm input[type="text"]').val("");

但你可以改进这一点

$('#frm input:text').val("");

【讨论】：

.removeAttr 可能会导致问题。
关心如何扩展？或者提供链接？
是的，Kzqai，我也很好奇我的回答也被否决了。文档没有提到风险。
相关文档其实是关于.prop()方法的：api.jquery.com/prop引用“属性通常会影响DOM元素的动态状态，而不改变序列化的HTML属性。例子包括输入元素的value属性，输入和按钮的禁用属性，或复选框的选中属性。应使用 .prop() 方法设置禁用和选中，而不是 .attr() 方法。应使用 .val() 方法获取和设置价值。”这意味着...
...这意味着 .attr() 将改变与 .prop() 不同的底层源，序列化的 html 属性而不是 DOM，虽然这现在可能兼容（例如 jQuery 1.9 可以在使用 .attr() 时同时修改两者），这不能保证将来在 .prop() 是规范的情况下会继续修改两者。例如，如果您使用 .attr('checked', false);并且您使用的库包含 .prop('checked', true);，这将存在可能导致烦人的错误的固有冲突。

【解决方案3】：

试试

$(this).removeAttr('checked')

由于许多浏览器会将“checked=anything”解释为 true。这将完全删除选中的属性。

希望这会有所帮助。

【讨论】：

另外，正如其他答案之一提到的那样，您不需要每个功能；您可以将 removeAttr 调用链接到选择器。
注意：此响应来自 2010 年。当时，这是一种有效且被接受的方法。从那时起，它已被弃用。

【解决方案4】：

基于 Igor 的代码对 Laurynas 的插件进行了轻微修改。这容纳了与目标单选按钮相关的可能标签：

(function ($) {
    $.fn.uncheckableRadio = function () {

        return this.each(function () {
            var radio = this;
                $('label[for="' + radio.id + '"]').add(radio).mousedown(function () {
                    $(radio).data('wasChecked', radio.checked);
                });

                $('label[for="' + radio.id + '"]').add(radio).click(function () {
                    if ($(radio).data('wasChecked'))
                        radio.checked = false;
                });
           });
    };
})(jQuery);

【讨论】：

这取决于标签的使用方式，如果它们使用 ID，则此代码有效，如果单选按钮嵌套在标签中则无效。你可以使用这个更加增强的版本：gist.github.com/eikes/9484101

【解决方案5】：

将 Igor 的代码重写为插件。

用途：

$('input[type=radio]').uncheckableRadio();

插件：

(function( $ ){

    $.fn.uncheckableRadio = function() {

        return this.each(function() {
            $(this).mousedown(function() {
                $(this).data('wasChecked', this.checked);
            });

            $(this).click(function() {
                if ($(this).data('wasChecked'))
                    this.checked = false;
            });
        });

    };

})( jQuery );

【讨论】：

如果我单击标签，则取消选择不起作用。因此，虽然可以通过单击标签来选择单选，但只有通过单击单选按钮本身才能取消选择。
@alkos333 有一个似乎也适用于标签的解决方案。
这取决于标签的使用方式，如果它们使用 ID，则 @alkos333 代码有效，如果单选按钮嵌套在标签中，请使用此版本：gist.github.com/eikes/9484101

【解决方案6】：

感谢帕特里克，你让我开心！这是你必须使用的mousedown。不过我已经改进了代码，以便您可以处理一组单选按钮。

//We need to bind click handler as well
//as FF sets button checked after mousedown, but before click
$('input:radio').bind('click mousedown', (function() {
    //Capture radio button status within its handler scope,
    //so we do not use any global vars and every radio button keeps its own status.
    //This required to uncheck them later.
    //We need to store status separately as browser updates checked status before click handler called,
    //so radio button will always be checked.
    var isChecked;

    return function(event) {
        //console.log(event.type + ": " + this.checked);

        if(event.type == 'click') {
            //console.log(isChecked);

            if(isChecked) {
                //Uncheck and update status
                isChecked = this.checked = false;
            } else {
                //Update status
                //Browser will check the button by itself
                isChecked = true;

                //Do something else if radio button selected
                /*
                if(this.value == 'somevalue') {
                    doSomething();
                } else {
                    doSomethingElse();
                }
                */
            }
    } else {
        //Get the right status before browser sets it
        //We need to use onmousedown event here, as it is the only cross-browser compatible event for radio buttons
        isChecked = this.checked;
    }
}})());

【讨论】：

【解决方案7】：

对于电台和电台组：

$(document).ready(function() {
    $(document).find("input:checked[type='radio']").addClass('bounce');   
    $("input[type='radio']").click(function() {
        $(this).prop('checked', false);
        $(this).toggleClass('bounce');

        if( $(this).hasClass('bounce') ) {
            $(this).prop('checked', true);
            $(document).find("input:not(:checked)[type='radio']").removeClass('bounce');
        }
    });
});

【讨论】：

【解决方案8】：

试试这个，这会成功的：

        $(document).ready(function() {
           $("input[type='radio']").mousedown(function(e) {
                if ($(this).attr("checked") == true) {
                   setTimeout("$('input[id=" + $(this).attr('id') + "]').removeAttr('checked');", 200);}
                else {
                    return true
                }
            });
        });

【讨论】：

【解决方案9】：

试试

$(this).attr("checked" , false );

【讨论】：

【解决方案10】：

您也可以仅使用复选框来模拟单选按钮的行为：

<input type="checkbox" class="fakeRadio" checked />
<input type="checkbox" class="fakeRadio" />
<input type="checkbox" class="fakeRadio" />

然后，您可以使用这个简单的代码为您工作：

$(".fakeRadio").click(function(){
    $(".fakeRadio").prop( "checked", false );
    $(this).prop( "checked", true );
});

它工作正常，您可以更好地控制每个按钮的行为。

你可以自己试试：http://jsfiddle.net/almircampos/n1zvrs0c/

这个分叉还可以让您按照评论中的要求取消选择所有内容： http://jsfiddle.net/5ry8n4f4/

【讨论】：

这很好，但您不能取消选中所有复选框。

【解决方案11】：

使用这个

$("input[name='nameOfYourRadioButton']").attr("checked", false);

【讨论】：

【解决方案12】：

只需为 jQuery 输入以下代码：

jQuery("input:radio").removeAttr("checked");

对于 javascript：

$("input:radio").removeAttr("checked");

无需放置任何 foreach 循环、.each() 函数或任何东西

【讨论】：

【解决方案13】：

您可以使用此 JQuery 取消选中单选按钮

$('input:radio[name="IntroducerType"]').removeAttr('checked');
                $('input:radio[name="IntroducerType"]').prop('checked', false);

【讨论】：

【解决方案14】：

$('#frm input[type="radio":checked]').each(function(){
   $(this).checked = false;  
  });

这几乎是好的，但你错过了 [0]

正确 ->> $(this)[0].checked = false;

【讨论】：

或简称：this.checked = false;

【解决方案15】：

function setRadio(obj) 
{
    if($("input[name='r_"+obj.value+"']").val() == 0 ){
      obj.checked = true
     $("input[name='r_"+obj.value+"']").val(1);
    }else{
      obj.checked = false;
      $("input[name='r_"+obj.value+"']").val(0);
    }

}

<input type="radio" id="planoT" name="planoT[{ID_PLANO}]" value="{ID_PLANO}" onclick="setRadio(this)" > <input type="hidden" id="r_{ID_PLANO}" name="r_{ID_PLANO}" value="0" >

:D

【讨论】：

【解决方案16】：

$('input[id^="rad"]').dblclick(function(){
    var nombre = $(this).attr('id');
    var checked =  $(this).is(":checked") ;
    if(checked){
        $("input[id="+nombre+"]:radio").prop( "checked", false );
    }
});

每次双击选中的单选时，选中的选项都会变为 false

我的收音机以 id=radxxxxxxxx 开头，因为我使用了这个 id 选择器。

【讨论】：

请用（可以理解的）英文写下答案。
@ericbn 如果有人不懂英语怎么办？
@AlphaMale 英语是本网站的官方语言。
@Cristik 并非所有程序员都来自“英语”国家。这是否意味着他们不能在这个论坛上发帖？其次，已经2年了。谢谢你启发我。

【解决方案17】：

function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).attr('checked', false);  
  });
 }

正确的选择器是：#frm input[type="radio"]:checked 不是#frm input[type="radio":checked]

【讨论】：