单选按钮上的更改事件如何工作答案

【问题标题】：How change event work on radio buttons单选按钮上的更改事件如何工作
【发布时间】：2013-12-12 04:56:54
【问题描述】：

仅在选中无线电时才捕获更改功能，但在未选中时不会捕获。为什么？它应该那样做吗？当我单击单选按钮时，另一个是不变的，所以事件应该触发，对吧？下面是代码和jsfiddle。我做错了什么吗？

HTML：

Option1 <input type="radio" name="choice" id="op1" checked/>
Option2 <input type="radio" name="choice" id="op2"/>
<br><br>
<span id="sp1">Option1</span><br>
<span id="sp2" style="display: none;">Option2</span>

Javascript：

var op2 = $('#op2');
var sp1 = $('#sp1');
var sp2 = $('#sp2');

op2.change(function(){
    if(op2.is(':checked')){
        sp1.hide();
        sp2.show();
    }
    else{
        sp2.hide();
        sp1.show();
    }
});

【问题讨论】：

您的问题是为什么当收音机输入未被选中时不会触发更改事件？
@j08691 我相信是的，我不熟悉这个，有什么智慧之言吗？
@Jasper -nah，我只是在考虑与您提出的相同基本解决方案（+1 btw）。

标签： javascript jquery html radio-button onchange

【解决方案1】：

更改您的选择器以使用名称获取它

$("input[name='choice']").change(function(){
    if(op2.is(':checked')){
        sp1.hide();
        sp2.show();
    }
    else{
        sp2.hide();
        sp1.show();
    }
});

工作样本http://jsbin.com/UPILuCe/1

【讨论】：

好吧，你和 Jasper 的答案都有效（谢谢你们），但你先回答了，我更喜欢带有“名字”的解决方案。

【解决方案2】：

当任一复选框更改时，您可以运行事件处理程序：

$('#op2, #op1').change(...

这是一个演示：http://jsfiddle.net/TCt82/

另一种选择它的方法是通过元素name，因为两个复选框需要具有相同的name 属性。按 ID 选择会更快（尽管您看不到差异）。

UPADTE

如果有人知道change 事件在取消选中复选框后未在复选框上触发的确切原因，请将其作为评论或答案发布。

【讨论】：