[IE8＆IE7 onchange事件仅在重复选择后才触发

Question

我有一组带有onchange处理程序的收音机：

<input type="radio" name="Q12" value="radio" id="Q12_0"  onchange="nextPnl('Q12');">
<br/>
<input type="radio" name="Q12" value="radio" id="Q12_1"  onchange="nextPnl('Q12');">
         ​

function nextPnl(did)
{
document.write(did);

}​

问题在于，在IE8和IE7中，仅在反复选择后才触发onchange事件。

[请在IE开发人员工具[浏览器模式] IE8中查看此演示：http://jsfiddle.net/3zwur/2/

Answer 1

这是由于IE7和IE8的更改事件的错误。您应该改为监听click事件。

如此table on quirks mode所示，在IE7和IE8中，单选按钮和复选框上的更改事件有很多错误。

您可以像这样监听click事件：

<input type="radio" name="Q12" value="radio" id="Q12_0"  onclick="nextPnl('Q12');">
<br>
<input type="radio" name="Q12" value="radio" id="Q12_1"   onclick="nextPnl('Q12');">

还有你的小提琴的叉子：http://jsfiddle.net/T7VYL/
通常，使用JQuery和YUI之类的JavaScript库可以使您的生活更轻松，尽管从我的测试来看，它们不能在IE的较早版本中解决此错误。
如果您仍想收听更改事件，则可以部署此修补程序：http://www.ridgesolutions.ie/index.php/2011/03/02/ie8-chage-jquery-event-not-firing/。基本上，它侦听click事件，然后使元素触发更改事件。
如询问者的小提琴所示：http://jsfiddle.net/3zwur/3

Answer 2

另一种选择是像已经拥有一个onchange事件，并添加一个onclick事件以从单选按钮中删除焦点：

<input type="radio" name="Q12" value="radio" id="Q12_0" onclick="this.blur()" onchange="nextPnl('Q12');">

Answer 3

另一种解决方案是通过jQuery将onchange事件放在封闭的表单上。

$('#form').on('change', function() {
    $(this).submit();
});