Javascript / JQuery取消选择单选按钮

Question

我有以下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

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

你可以在这里测试一下 。