如何取消单选按钮?

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

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

在这个函数的帮助下,我可以清除文本框中的值,但我不能清除单选按钮的值。

顺便说一下,我也尝试了$(this).val("");,但没有工作。

831924 次浏览

试一试

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

(纯js)

this.checked = false;

或(jQuery)

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

参见jQuery prop()帮助页面 . jQuery,了解attr ()支持()之间的差异,以及为什么prop()现在更可取 prop()是2011年5月在jQuery 1.6中引入的

您不需要each函数

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

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

同样也应该适用于你的文本框:

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

但是你可以改进它

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

试一试

$(this).removeAttr('checked')

因为很多浏览器会把'checked=anything'解释为真。这将完全删除checked属性。

希望这能有所帮助。

试试这个,这个会有效果的:

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

谢谢帕特里克,你让我今天很开心!你必须使用鼠标下键。不过,我已经改进了代码,以便您可以处理一组单选按钮。

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

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

电台及电台组:

$(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');
}
});
});
$('#frm input[type="radio":checked]').each(function(){
$(this).checked = false;
});

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

正确->> $(this)[0].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开头,因为我使用了这个id选择器。

你也可以只使用复选框来模拟单选按钮的行为:

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

这个fork还可以让你取消在注释中请求的所有选择: # EYZ0 < / p >
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 不是# EYZ0 < / p >

下面是jQuery的代码:

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

对于javascript:

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

没有必要在foreach循环,.each()函数或任何东西

使用这个

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

你可以使用JQuery来取消选中单选按钮

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