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

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

HTML

​

这对你来说怎么样

---

为什么不简单地创建一个自定义事件，比如说，

取消选择

，并让它在单击的无线电组的所有成员上触发，除了单击的元素本身？它的方法更容易使用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" />

​取消选择事件将仅在同一无线电组（具有相同

名称

属性的元素）的成员之间触发

编辑：为了说明附加标签标签的所有可能位置（包装无线元素或通过id选择器附加），最好使用

onchange

事件触发处理程序。谢谢你指出这一点

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

---

我认为这可能是因为

focus

事件在

change

事件之前触发，所以您单击的下一个收音机将在上一个选中的收音机触发更改事件之前聚焦。但不要引用我的话

你可以这样做：

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

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

演示：

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

如果你想说：

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

然后从document ready处理程序中运行类似以下的函数（或将代码直接放入document ready处理程序中）：

工作演示：

---

这样做的目的是在页面上的所有收音机上放置一个单击处理程序（这不会阻止您将自己的单击事件处理程序添加到相同的收音机上），该处理程序将检查同一组中是否有以前选择的收音机（即，具有相同的名称），如果是，则触发该收音机上的“取消选择”事件。然后，它将刚刚单击的一个保存为当前一个。如果单击已选中的收音机或之前没有选中的收音机，则不会触发“取消选择”事件。最后的

.filter（）。每个（）

位用于记录已选择的收音机。（如果您需要在同一页面上满足多个具有相同名称的独立单选组的表单，请相应地更新上述功能。）

我认为您需要在输入级别上添加更改功能，而不是在每个单选按钮上添加更改功能

试试这个：

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

---

我发现，在不添加新框架来创建

取消选择的

事件的情况下，最简单的方法是让更改任何单选按钮触发组中所有单选按钮的

更新

事件，然后在更新事件中定义所需的行为

缺点是，即使之前没有选择单选按钮，取消选择分支中的代码也会运行。如果您所做的只是简单地显示、隐藏或禁用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.
    }
});​

---

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

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

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

---

以下是上述代码的。

我为我的具体案例找到了一个解决方法，可能会有所帮助。当“取消选择”事件可应用于所有未选择的单选按钮时，此选项起作用

我想：

当选中单选按钮时，向元素添加类，并且

当按钮处于“取消选择”状态时，删除该类 我碰巧发现了这个问题，因为我有同样的问题：

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

但是，在我的例子中，解决方案要简单得多，因为我可以尝试使用jQuery从所有单选按钮中删除该类，然后将该类添加到所选的单选按钮中：

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

通过这个简单的调整，我不需要找到触发“取消选择”事件的方法

---

因此，如果在您的情况下您可以将事件应用于所有未选择的单选按钮，而不仅仅是刚刚“取消选择”的单选按钮，您可以使用此度量

注意：我使用的是jquery的最新版本：3.4.1版。但这也适用于旧版本

这里的主要挑战是，更改事件仅为选中的单选按钮触发。下面的代码证实了这一点

$（“输入[name^='account']）。更改（函数（）{
log（$（this.prop（'id'）+“已选中”）；
});

约翰

简

杰夫

裘德



我玩了一下ids。
公平地说，这可能是一个低效的解决方案

<input type="radio" id="radio-1" name="a" value="initial 1"/>
<input type="radio" id="radio-2" name="a" value="initial 2"/>

用户无法取消选择收音机…您想做什么？用户可以取消选择收音机，但选择另一个单选按钮。听起来收音机控制错误…或者只是不理解您的期望。所有答案基本上都是你所写内容的衍生物，因为没有可点击的事件into@undefined-当选择更改时，想要知道组中的哪个单选按钮以前被选中，这不是不合理的。当只有两个收音机的时候，这有点微不足道，因为显然，它总是一个不只是被点击的收音机，但是在一个组中有两个以上的收音机是很常见的…一个收音机可以被取消选择。关于收音机“
onchange
的奇怪之处在于它不是“onchange”，而是“onchangetorue”。除了装饰/表示之外，它们当前的实现与
+
没有什么不同。从逻辑上讲，当选择另一个按钮时，它会改变！！！为什么不是

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

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

<input type="radio" id="radio-1" name="a" value="initial 1"/>
<input type="radio" id="radio-2" name="a" value="initial 2"/>

let id;
$('input[id*="radio-"]').on('click', (function() {
      if (this.id != id && this.checked) {
        id = this.id;
        this.checked = true;
        console.log('selected');
      } else if (this.id == id && this.checked) {
        id = undefined;
        this.checked = false;
        console.log('deselected');
      }
}));