Javascript / JQuery取消选择单选按钮

我有以下javascript，我想用它来让用户通过点击取消选择一个选定的单选按钮。 （我知道这不是标准，但它是系统所要求的:)

DeselectRadioButton = { setup: function () { $(".deselectRadioButton").click(function () { if ($(this).is(':checked')) { alert("I am checked!"); ($(this).removeAttr('checked')); } }); } }; 

我的问题是，当我选择一个未选中的单选按钮时，它会在警报显示后立即取消选择它。

我猜我在项目更改后收到了这个事件 – 如何修复此代码以使我的单选按钮无法选择？

谢谢！

Answer 1

但是，主要问题是当我选择一个未选中的单选按钮时，它会在警报显示后立即取消选择它。

看起来你无法阻止单选按钮的默认行为， return false或e.preventDefault()因为在单击处理程序被触发时总是会检查单选按钮。 解决这个问题的一种方法是在单选按钮上添加一个单独的类，并将其用作指示符。

 $(".deselectRadioButton").click( function(e){ if($(this).hasClass("on")){ $(this).removeAttr('checked'); } $(this).toggleClass("on"); }).filter(":checked").addClass("on"); 

关于jsfiddle的代码示例。

Answer 2

我在这样做时遇到的挑战之一是使用单选按钮组。 解决方案为单个单选按钮提供了出色的工作，但在组中我遇到了一个问题，即取消选择一个然后尝试选择另一个失败（直到第二次点击）。

我刚刚遇到一个解决方案，它的工作非常出色：

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

Answer 3

尝试：

 $(this).removeAttr('checked'); 

Answer 4

我遇到了大卫用单选按钮组描述的相同问题。 这是解决该问题的另一种方法（基于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"); 

Answer 5

你确定没有别的东西搞砸了吗？

我试过这个代码，它的工作原理是：

HTML

 
 
  One 
 
  Two 
 
  Three 
  

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

你可以在这里测试一下 。