518

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

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

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

顺便说一句,我也尝试过$(this).val("");,但没有奏效。

4

17 回答 17

802

要么(纯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() 于 2011 年 5 月与 jQuery 1.6 一起引入。

于 2010-01-22T13:47:05.743 回答
95

你不需要这个each功能

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

或者

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

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

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

但你可以改进这个

$('#frm input:text').val("");
于 2010-01-22T13:49:13.270 回答
30

尝试

$(this).removeAttr('checked')

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

希望这可以帮助。

于 2010-01-22T13:49:13.587 回答
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);
于 2011-11-29T21:41:38.107 回答
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;
    }
}})());
于 2010-11-04T19:51:25.587 回答
20

将 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 );
于 2011-09-18T13:56:24.473 回答
17

对于电台和电台组:

$(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');
        }
    });
});
于 2012-10-30T11:36:59.087 回答
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
                }
            });
        });
于 2010-10-01T11:02:11.350 回答
11

尝试

$(this).attr("checked" , false );
于 2010-01-22T13:47:03.020 回答
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/

于 2014-08-18T07:03:41.540 回答
7

用这个

$("input[name='nameOfYourRadioButton']").attr("checked", false);
于 2017-01-09T19:59:36.757 回答
6

只需为 jQuery 输入以下代码:

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

对于 javascript :

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

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

于 2015-04-09T07:04:04.450 回答
6

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

$('input:radio[name="IntroducerType"]').removeAttr('checked');
                $('input:radio[name="IntroducerType"]').prop('checked', false);
于 2018-10-16T06:50:20.910 回答
4
$('#frm input[type="radio":checked]').each(function(){
   $(this).checked = false;  
  });

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

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

于 2013-12-20T18:16:50.793 回答
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

于 2014-06-16T14:43:00.827 回答
-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 选择器。

于 2014-08-13T16:11:53.547 回答
-3
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]

于 2015-01-15T16:28:58.227 回答