如何取消选中单选button?

我有一组单选button,我想在使用jQuery提交AJAX表单后取消选中。 我有以下function:

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

借助此function,我可以清除文本框中的值,但无法清除单选button的值。

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

无论是(普通的js)

 this.checked = false; 

或(jQuery)

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

请参阅jQuery prop()帮助页面,了解attr()prop()之间的区别以及为什么prop()现在更可取。
在2011年5月,jQuery 1.6引入了prop()。

你不需要eachfunction

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

要么

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

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

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

但是你可以改善这一点

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

尝试

 $(this).removeAttr('checked') 

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

希望这可以帮助。

基于伊戈尔的代码对Laurynas的插件稍作修改。 这容纳了与作为目标的单选button相关联的可能的标签:

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

谢谢帕特里克,你做了我的一天! 你必须使用它。 不过,我改进了代码,以便处理一组单选button。

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

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

对于广播和广播组:

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

试试这个,这样做会有诀窍:

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

尝试

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

您也可以仅使用checkbox模拟单选button行为:

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

它工作正常,你有更多的控制每个button的行为。

你可以尝试一下: http : //jsfiddle.net/almircampos/n1zvrs0c/

这个分支也让你取消select所有请求的评论: http : //jsfiddle.net/5ry8n4f4/

只需将以下代码放入jQuery:

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

而对于JavaScript:

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

没有必要把任何foreach循环,.each()fubction或任何东西

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

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

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

用这个

 $("input[name='nameOfYourRadioButton']").attr("checked", false); 
 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

 $('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开头,因为我使用了这个IDselect器。

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

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