Question

假设我有一组两个单选按钮：

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

似乎单击第二个按钮会仅触发该按钮上的事件处理程序。但是，第一个按钮确实被取消选择，并且在视觉上确实会发生变化。任何人都可以验证在所选按钮上仅触发了事件，而不是由于点击而取消选择的组中的任何其他按钮吗？是否有任何聪明的方法来观看取消选择事件的单选按钮？

Answer 1

虽然无法确认，但事件更改触发器不会发生在整个组中。

如果您希望这样做，您可以使用各种JS库（如jQuery，YUI等）甚至普通的javascript来完成，如下所示：

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 2

首先，需要注意的是，在“已检查”值之后，任何无线电上的“点击”事件都会更新。这很重要 - 因为这意味着一旦事件被触发，您就无法检测到前一个项目。如果取消事件，则实际上是在更改值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 3

我无法确认是否仅针对所选按钮触发了某个事件，但如果您需要对刚取消选择的按钮执行某些操作，则以下操作会起作用：

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

行动here。

如果您需要跟踪多组单选按钮，可以使用当前选定按钮的数组进行跟踪，并在检测到更改时匹配该数组。

Answer 4

单选按钮组的简单特性是一次只能选择一个按钮。自动选择按钮意味着未选择其他按钮，但没有用于取消选择的特定操作。因此，您只需要担心一个事件，因为它一次影响集合中的所有按钮。

如果您想使用允许多项选择的元素，请尝试复选框。

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

单选按钮组 - 按钮的更改事件将被取消选择？

5 个答案: