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

你可以在這里測試一下 。