如何取消选中单选按钮?


482

我有一组要使用jQuery提交AJAX表单后取消选中的单选按钮。我有以下功能:

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

借助此功能,我可以清除文本框中的值,但不能清除单选按钮的值。

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


3
您不需要每个功能。您可以只在jQuery对象上调用所需的函数。请在下面查看我的答案
James Wiseman 2010年

1
不需要each()函数。jQuery(“ input:radio”)。removeAttr(“ checked”);
Jitendra Damor

Answers:


737

要么(普通js)

this.checked = false;

或(jQuery)

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

有关attr()prop()之间的区别以及为什么现在更喜欢prop()的解释,请参见jQuery prop()帮助页面。 prop()是jQuery 1.6于2011年5月引入的。


29
PPL,要知道,他的行为是有利于改变1.6 prop(),而.attr()将被限制在实际属性
法比亚诺Soriani

那么最好在这里使用纯JS吗?
Doug Molineux

14
@Pete:我想说的是,如果您有一个基于jQuery构建的系统,那么给您的另一个优点是,如果有浏览器以不同的方式处理该问题,则可以将浏览器支持委派给该库。但是,如果您的软件当前不使用jQuery,那么为此仅包含库就不会产生开销。
David Hedlund

@David Hedlund:我想您是在暗示所有主流浏览器都以与今天相同的方式来处理,对吗?
肖恩2012年

2
@qris:您的问题可能在其他地方。使用jQuery 1.9的简单演示。当然可以在我的Chrome浏览器中使用。
David Hedlund 2013年

88

您不需要each功能

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

要么

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

同样也适用于您的文本框:

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

但是你可以改善这个

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

2
.removeAttr可能会引起问题。
2013年

关心如何扩展?或提供链接?
詹姆斯·怀斯曼

是的,Kzqai,我也很好奇我的回答也因此而被否决。该文档没有提及任何风险。
cjstehno

1
相关文档实际上在.prop()方法上:api.jquery.com/prop 引用“属性通常会在不更改序列化HTML属性的情况下影响DOM元素的动态状态。示例包括输入元素的value属性,disabled属性输入和按钮,或复选框的checked属性。.prop()方法应用于设置禁用和选中状态,而不是.attr()方法; .val()方法应用于获取和设置值。” 这意味着...
Kzqai

1
...这意味着.attr()将更改与.prop()不同的基础源,而不是DOM序列化的html属性,并且这可能现在兼容(例如,当.attr时,jQuery 1.9可能会同时修改两者) ()被使用),这不能保证将来会在.prop()规范时修改它们。例如,如果您使用.attr('checked',false); 并且您使用的库包括.prop('checked',true);,这将导致可能引起烦人的bug的内在冲突。
2013年

29

尝试

$(this).removeAttr('checked')

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

希望这可以帮助。


另外,正如其他答案之一提到的那样,您不需要每个功能;您可以将removeAttr调用链接到选择器。
cjstehno 2010年

6
注意:此回复来自2010年。当时,这是一种有效且被接受的方法。从那时起,它已被弃用。
cjstehno

21

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

1
它取决于标签的使用方式,如果标签使用ID,则此代码有效,如果单选按钮嵌套在标签中则不起作用。您可以使用此增强版:gist.github.com/eikes/9484101
eikes 2014年

20

谢谢帕特里克,你让我开心!您必须使用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;
    }
}})());

17

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

如果我单击标签,则取消选择不起作用。因此,虽然可以通过单击标签来选择单选按钮,但是仅通过单击单选按钮本身才能取消选择。
SimonHürlimann2013年

@ alkos333的解决方案似乎也适用于标签。
SimonHürlimann13年

它取决于标签的使用方式,如果标签使用ID,则@ alkos333代码有效,如果单选按钮嵌套在标签中,请使用以下版本:gist.github.com/eikes/9484101
eikes 2014年

16

对于广播和广播组:

$(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');
        }
    });
});

14

试试这个,这将达到目的:

        $(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

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

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


这很棒,除非您不能取消选中所有复选框。
Stefan

6

只需将以下代码用于jQuery即可:

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

对于javascript:

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

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


5

用这个

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

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

这几乎很好,但是您错过了[0]

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


1
或简单地说:this.checked = false;
eikes 2014年

4

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

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

1
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


-2
$('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选择器。


3
请用(可理解的)英语写下答案。
ericbn 2014年

@ericbn如果有人不懂英语怎么办?
AlphaMale

@AlphaMale英语是该网站上的官方语言。
Cristik

@Cristik并非所有程序员都来自说英语的国家。这是否意味着他们无法在此论坛上发布?其次,已经交往两年了。感谢您的启发。
AlphaMale

-2
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]

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.