如何检测单选button取消select事件？

有一个简单的方法来附加一个单选button“取消”事件？ 看起来只有当button被选中时，更改事件才会被触发。

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

为什么不简单地创build一个自定义事件，让我们说， 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)); }) 

取消select事件将仅在相同无线电组（具有相同name属性的元素）的成员之间触发。

jsFiddle解决scheme

编辑：为了解决所有可能的附加标签标签（包装无线电元素或通过一个idselect器附加）的位置，使用onchange事件触发处理程序可能会更好。 感谢Faust指出了这一点。

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

Answer 2

您可以相对无痛地创build一个自定义的“取消select”事件，但正如您已经发现标准更改事件仅在新选中的单选button上触发，而不是在刚刚选中的单选button上触发。

如果你想能够这样说：

 $("#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

这样做是在页面上的所有收音机上放置一个点击处理程序（这不会阻止您将自己的点击事件处理程序添加到相同的收音机），这将检查是否在同一组中存在之前select的收音机（即，以相同的名字），如果是这样的话，在该收音机上触发“取消select”事件。 然后保存刚才点击的那一个。 如果您点击已经检查过的收音机或者没有预先确认的收音机，则不会触发“取消select”事件。 最后的.filter().each()位用于logging哪些无线电已经被选中。 （如果您需要在具有相同名称的独立无线电组的同一页上配合多个表格，请相应地更新上述function。）

Answer 3

我发现最简单的方法是在不添加新框架的情况下创build一个deselected事件，就是改变任何单选button触发组中所有单选button上的update事件，然后定义你想要的行为更新事件。

缺点是取消分支中的代码将运行，即使单选button没有被select。 如果你所做的只是简单的显示，隐藏或禁用UI元素，那应该不会太重要。

使用你的例子：

 buttons = $('input[name="a"]'); buttons.change(function() { buttons.trigger('update:groupA'); }).bind('update:groupA', function(){ if(this.checked) { //Do your checked things } else { //Do your unchecked things. Gets called whenever any other button is selected, so don't toggle or do heavy computation in here. } });​ 

Answer 4

我想这可能会发生，因为focus事件在change事件之前触发，所以您点击的下一个广播将在上次选中的广播触发更改事件之前集中。 不要在这引用我，但…

你可以这样做：

 var isChecked = function(id) { alert(id + ': ' + $('#' + id).is(':checked')) } $('input[name="a"]').change(function(){ isChecked('one') }) 

演示： http : //jsfiddle.net/elclanrs/cD5ww/

Answer 5

我认为你需要在input级别添加更改function，而不是每个单选button。

尝试这个：

 $("input[name='a']").change(function() { $("input[name='a']").each(function(){ if(this.checked) { // do something when selected } else { // do something when deselected } }); });​ 

Answer 6

您可以自己触发“更改”事件。 避免单选button无限触发彼此的“更改”事件有点棘手，但可以这样做：

 $('input[type="radio"]').each(function() { var name = $(this).attr('name'); var that = this; $('input[name="'+name+'"][type="radio"]').not(that) .on('change', function(e, alreadyTriggered) { if(!alreadyTriggered || alreadyTriggered.indexOf(this) == -1) { if(!alreadyTriggered) { alreadyTriggered = [that]; } alreadyTriggered.push(this); $(that).trigger('change', [alreadyTriggered]); } }); }); 

以下是上述代码的演示 。

Answer 7

我发现了一个解决scheme，可以帮助我的具体情况 。 当“取消select”事件可以应用于所有未select的单选button时，这将起作用。

我想：

1. 当单选button被选中时 ， 添加一个类到元素
2. 当button被“取消select”时删除该类 。

我偶然发现这个问题，因为我有同样的问题：

 $('input:radio').on('change', function() { if( $(this).is(':checked') ) { $(this).addClass('my-class-for-selected-buttons') } else { // THIS WILL NEVER HAPPEN $(this).removeClass('my-class-for-selected-buttons') } });​ 

但是，在我的情况下，解决scheme是非常容易的，因为我可以尝试从jQuery中删除所有的单选button，然后将类添加到选定的一个：

 $('input:radio').on('change', function() { $('input:radio').removeClass('my-class-for-selected-buttons') // Here! if( $(this).is(':checked') ) { $(this).addClass('my-class-for-selected-buttons') } });​ 

通过这个简单的调整，我不需要find触发“取消select”事件的方法。

所以，如果你的情况下， 你可以将事件应用到所有未选中的单选button ，而不仅仅是刚被“取消select” 的单选button ，你可以使用这个措施！

Answer 8

这是为了雅吗？

http://jsfiddle.net/WZND9/6/

  $('input').change(function() { if ($('#one').is(':checked')) { alert('checked'); } else { alert('not checked'); } });