單選按鈕組 - 更改按鈕的事件會被取消選中？

Question

比方說，我有一組的兩個單選按鈕：

<input type="radio" name="radioButtonGroup" value="button1" checked="true"/> 
<input type="radio" name="radioButtonGroup" value="button2"/> 

看來，單擊第二個按鈕觸發該按鈕只有事件處理程序。但是，第一個按鈕確實被取消選擇，並且視覺上確實發生了變化。任何人都可以驗證事件被觸發只有在被選中的按鈕上，而不是由於點擊而被取消選擇的組中的任何其他按鈕？任何聰明的方式來觀看取消選擇事件的單選按鈕？

Answer 1

我無法證實事件僅觸發所選按鈕的，但如果你需要做的是剛剛取消按鈕的東西，下面的工作：

$(document).ready(function(){ 
    var selectedRadio = null; 
    $("input:radio").change(function(){   
     if(selectedRadio != null){ 
      alert(selectedRadio.val()); 
     } 
     selectedRadio = $(this); 
    }); 
}); 

在行動here 。

如果您需要跟蹤多組單選按鈕，您可以使用當前選定按鈕的數組執行此操作，並在檢測到更改時在該數組內匹配。

Answer 2

儘管無法確認，但事件更改觸發器不會發生在整個組上。

如果你想這樣的事情發生，你可以使用像jQuery，YUI等，甚至普通的JavaScript各種JS庫做到這一點，如下所示：

function buttonGroupChange(){ 
    var radioElements = document.getElementsByName("radio_group_name"); 
    for(var i = 0; i < radioElements.length; i++){ 
     if(radioElements[i].checked == true){ 
      //do something 
     } 
     else{ 
      //do something 
     } 
    } 
} 

此功能可以在的onClick或叫onChange事件。

我希望能夠解決您的問題。

Answer 3

首先，重要的是要注意，任何無線電的「點擊」事件在「檢查」值已經更新後觸發。這很重要 - 因爲這意味着一旦事件已經被觸發就無法檢測到前一個項目。如果您取消該事件，則實際上正在更改BACK的值 - 而不是最初停止它。這對你如何解決問題很重要。

例子：

<input type="radio" name="radioButtonGroup" value="button1" checked="true"/> 
<input type="radio" name="radioButtonGroup" value="button2"/> 

// At this point, the ':checked' item is button1. 
$('input[type=radio]').bind('click', function (ev) { 
    // If you click on button2 - by this point, the ':checked' item is already button2. 
    ev.preventDefault(); // These two lines will stop the radio from actually 
    ev.stopPropagation(); // changing selection. 

    // At this point, the ':checked' item is set BACK to button1. 
}); 

正因爲如此，最簡單的方法是跟蹤一個封閉旁邊的事件處理程序的「最後」選擇項，具體如下：

<input type="radio" name="radioButtonGroup" value="button1" checked="true"/> 
<input type="radio" name="radioButtonGroup" value="button2"/> 

<script type="text/javascript"> 
    var $last = $('[name=radioButtonGroup]:checked'); 

    // Select the radio buttons as a group. 
    var $radios = $('[name=radioButtonGroup]').bind('change', function (ev) { 
     // Click event handler 
     var $clicked = $(ev.target); // This is the radio that just got clicked. 
     $last.trigger('unclick'); // Fire the "unclick" event on the Last radio. 

     $last = $('[name=radioButtonGroup]:checked'); // Update the $last item. 

     // Should see the clicked item's "Value" property. 
     console.log("Clicked " + $clicked.attr('value'), $clicked, ev); 
    }).bind('unclick', function (ev) { 
     // Handler for our new "unclick" event. 
     // - fires whenever a radio loses focus. 
     var $unclicked = $(ev.target); // The radio losing it's checked status. 

     // Should see the unclicked item's "Value" property. 
     console.log("Unclicked " + $unclicked.attr('value'), $unclicked, ev); 
    }); 
</script> 

對於工作例如，參見：

http://jsfiddle.net/TroyAlford/wvrtC/

Answer 4

的SIMPL單選按鈕組的性質是一次只能選擇一個按鈕。自動選擇一個按鈕意味着其他選項未被選中，但沒有特定的取消選擇操作。因此，您只需要擔心一個事件，因爲它一次會影響集合中的所有按鈕。

如果您想使用允許多選的元素，請嘗試複選框。

Answer 5

如果您使用的是jQuery，則可以綁定並觸發一個自定義事件，我們將其命名爲deselect。

使用下面的代碼我們定義了deselect事件。

$(document).ready(function(){ 
    var selectedRadioList = {}; 

    $('input:radio:checked').each(function(){ 
     selectedRadioList[this.name] = this; 
    }); 

    $('input:radio').click(function(){ 
     if(selectedRadioList[this.name]) 
      $(selectedRadioList[this.name]).trigger('deselect'); 

     selectedRadioList[this.name] = this; 
    }); 
}); 

現在我們可以綁定到我們需要的每個地方的deselect。

$(document).ready(function(){ 
    $('input:radio').on('deselect', function(){ 
     alert('radio `' + this.value + '` has been deselected'); 
    }); 
});