我有以下 javascript，我想使用它使用户能够通过单击取消选择选定的单选按钮。 （我知道这不是标准的，但这是系统要求的:)
DeselectRadioButton = {
setup: function () {
$(".deselectRadioButton").click(function () {
if ($(this).is(':checked')) {
alert("I am checked!");
($(this).removeAttr('checked'));
}
});
}
};
我的问题是，当我选择一个未选择的单选按钮时，它会在警报显示后立即取消选择它。
我想我是在项目更改后收到事件 - 如何修复此代码以使我的单选按钮无法选择？
谢谢！
【问题讨论】：
标签： javascript jquery radio-button
但是，主要问题是当我 选择一个未选中的单选按钮，它 后立即取消选择它 警报显示。
您似乎无法使用return false 或e.preventDefault() 阻止单选按钮的默认行为，因为在触发点击处理程序时始终会检查单选按钮。解决此问题的一种方法是向单选按钮添加一个单独的类并将其用作指示器。
$(".deselectRadioButton").click( function(e){
if($(this).hasClass("on")){
$(this).removeAttr('checked');
}
$(this).toggleClass("on");
}).filter(":checked").addClass("on");
jsfiddle 上的代码示例。
【讨论】：
我在执行此操作时发现的一个挑战是单选按钮组。解决方案为单个单选按钮提供了出色的工作，但在组中我遇到了一个问题，即取消选择一个然后尝试选择另一个失败（直到第二次单击）。
我刚刚遇到了一个非常有效的解决方案here：
var allRadios = $('input[type=radio]')
var radioChecked;
var setCurrent = function(e) {
var obj = e.target;
radioChecked = $(obj).attr('checked');
}
var setCheck = function(e) {
if (e.type == 'keypress' && e.charCode != 32) {
return false;
}
var obj = e.target;
if (radioChecked) {
$(obj).attr('checked', false);
} else {
$(obj).attr('checked', true);
}
}
$.each(allRadios, function(i, val){
var label = $('label[for=' + $(this).attr("id") + ']');
$(this).bind('mousedown keydown', function(e){
setCurrent(e);
});
label.bind('mousedown keydown', function(e){
e.target = $('#' + $(this).attr("for"));
setCurrent(e);
});
$(this).bind('click', function(e){
setCheck(e);
});
});
【讨论】：
尝试：
$(this).removeAttr('checked');
【讨论】：
我遇到了与大卫描述的单选按钮组相同的问题。这是解决该问题的另一种方法（基于 Mark 的解决方案），适用于同一页面上的多个单选按钮组：
$(":radio").click( function(e){
var itsOn = $(this).hasClass("on");
$(":radio[name="+ this.name + "]").removeClass("on");
if(itsOn){
$(this).removeAttr('checked');
$(this).siblings().filter("[value='']").attr('checked', true);
} else {
$(this).addClass("on");
}
}).filter(":checked").addClass("on");
【讨论】：
你确定没有其他问题吗？
我试过这段代码，它可以工作：
HTML
<ul>
<li>
<input id="one" name="value" type="radio">
<label for="one">One</label>
</li>
<li>
<input id="two" name="value" type="radio">
<label for="two">Two</label>
</li>
<li>
<input id="three" name="value" type="radio">
<label for="three">Three</label>
</li>
</ul>
JavaScript
$("input[type='radio']").click(function(event) {
// If the button is selected.
if ($(this).hasClass("checked")) {
// Remove the placeholder.
$(this).removeClass("checked");
// And remove the selection.
$(this).removeAttr("checked");
// If the button is not selected.
} else {
// Remove the placeholder from the other buttons.
$("input[type='radio']").each(function () {
$(this).removeClass("checked");
});
// And add the placeholder to the button.
$(this).addClass("checked");
}
});
你可以测试一下here。
【讨论】：