如何取消选中单选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()。
你不需要each
function
$("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]