如何检测单选按钮取消选择事件？

Question

有没有一种简单的方法可以在单选按钮上附加"取消选择"事件？似乎更改事件仅在选择按钮时触发.

HTML

<input type="radio" id="one" name="a" />
<input type="radio" id="two" name="a" />

JavaScript的

$('#one').change(function() {
    if(this.checked) {
        // do something when selected
    } else { // THIS WILL NEVER HAPPEN
        // do something when deselected
    }
});?

的jsfiddle

Answer 1

为什么不简单地创建一个自定义事件,比如说,deselect让它触发所点击的无线电组的所有成员,除了点击的元素本身？它更容易使用jQuery提供的事件处理API.

HTML

<!-- First group of radio buttons -->
<label for="btn_red">Red:</label><input id="btn_red" type="radio" name="radio_btn" />
<label for="btn_blue">Blue:</label><input id="btn_blue"  type="radio" name="radio_btn" />
<label for="btn_yellow">Yellow:</label><input id="btn_yellow" type="radio" name="radio_btn" />
<label for="btn_pink">Pink:</label><input id="btn_pink"  type="radio" name="radio_btn" />
<hr />
<!-- Second group of radio buttons -->
<label for="btn_red_group2">Red 2:</label><input id="btn_red_group2" type="radio" name="radio_btn_group2" />
<label for="btn_blue_group2">Blue 2:</label><input id="btn_blue_group2"  type="radio" name="radio_btn_group2" />
<label for="btn_yellow_group2">Yellow 2:</label><input id="btn_yellow_group2" type="radio" name="radio_btn_group2" />
<label for="btn_pink_group2">Pink 2:</label><input id="btn_pink_group2"  type="radio" name="radio_btn_group2" />

jQuery的

// Attaching click event handlers to all radio buttons...
$('input[type="radio"]').bind('click', function(){
    // Processing only those that match the name attribute of the currently clicked button...
    $('input[name="' + $(this).attr('name') + '"]').not($(this)).trigger('deselect'); // Every member of the current radio group except the clicked one...
});

$('input[type="radio"]').bind('deselect', function(){
    console.log($(this));
})

取消选择事件将仅在同一无线电组的成员(具有相同name属性的元素)之间触发.

jsFiddle解决方案

编辑:为了计算附加标签标签的所有可能位置(包装无线电元素或通过id选择器附加),使用onchange事件触发处理程序可能更好.感谢Faust指出了这一点.

$('input[type="radio"]').on('change', function(){
    // ...
}

Answer 2

您可以相对轻松地创建自定义"取消选择"事件,但是您已经发现标准更改事件仅在新选中的单选按钮上触发,而不是在之前已选中的未选中的单选按钮上触发.

如果你想能够说出类似的话:

$("#one").on("deselect", function() {
    alert("Radio button one was just deselected");
});

然后从文档就绪处理程序中运行类似以下函数的东西(或将代码直接放在文档就绪处理程序中):

function setupDeselectEvent() {
    var selected = {};
    $('input[type="radio"]').on('click', function() {
        if (this.name in selected && this != selected[this.name])
            $(selected[this.name]).trigger("deselect");
        selected[this.name] = this;
    }).filter(':checked').each(function() {
        selected[this.name] = this;
    });
}

工作演示: http ://jsfiddle.net/s7f9s/2

这样做是在页面上的所有无线电上放置一个点击处理程序(这不会阻止您将自己的点击事件处理程序添加到相同的无线电),这将检查同一组中是否存在先前选择的无线电(即,具有相同的名称)如果是,则触发该无线电上的"取消选择"事件.然后它将刚刚单击的一个保存为当前的一个.如果单击已检查的无线电或者之前没有选中的无线电,则不会触发"取消选择"事件.最后的.filter().each()位是记下已经选择了哪些无线电.(如果您需要在具有相同名称的独立无线电组的同一页面上提供多个表格,请相应地更新上述功能.)