通过javascript设置时单选按钮onchange不触发答案

【问题标题】：radiobutton onchange not firing when set via javascript通过javascript设置时单选按钮onchange不触发
【发布时间】：2013-06-23 14:23:27
【问题描述】：

当我通过 javascript 设置选中状态时，我想要的是单选按钮触发 onchange 事件。

http://jsfiddle.net/4gtCn/

<script>
function check()
{
document.getElementById("red").checked=true
}
function uncheck()
{
document.getElementById("red").checked=false
}
function selectionChanged(){
alert("checked");
}
</script>

What color do you prefer?<br>
<input type="radio" name="colors" id="red" onchange="selectionChanged()">Red<br>
<input type="radio" name="colors" id="blue" onclick="selectionChanged()">Blue<br>
<input type="radio" name="colors" id="green">Green


<button type="button" onclick="check()">Check "Red"</button>
<button type="button" onclick="uncheck()">Uncheck "Red"</button>

感谢大家的帮助。这是一个更大问题的sn-p。我正在使用第 3 方报告工具 (LogiXml)。我唯一的选择是更改事件，因为其余的 javascript 是由该工具生成的。所以提供的一些选项对我没有帮助。因此，在上面的示例中，当我单击按钮时，单选按钮中的相应事件应该会触发。

【问题讨论】：

这似乎对我有用，请确保您的所有语句都以分号结尾。

标签： javascript radio-button

【解决方案1】：

Javascript OnChnage() 事件不适用于 IE8，因此最好使用 click 事件代替更改事件。见：http://forum.jquery.com/topic/ie8-onchange-onclick-not-firing。

关于 change 事件的一个更有趣的事情是，当您使用 Jquery 的 change() 函数时，它只有在您单击检查时才会起作用。不是当您单击取消选中。 JQuery $(#radioButton).change(...) not firing during de-selection

【讨论】：

【解决方案2】：

如果你想通过 onChange 事件运行 selectionChanged 函数，当用户点击调用 check() 函数时，你可以直接在 check() 函数上调用 selectionChanged 函数使其运行。

请检查下面的代码，我们在 check() 函数中添加了 selectionChanged()：

<script>
function check()
{
document.getElementById("red").checked=true
selectionChanged();
}
function uncheck()
{
document.getElementById("red").checked=false
}
function selectionChanged(){
alert("checked");
}
</script>

What color do you prefer?<br>
<input type="radio" name="colors" id="red" onchange="selectionChanged()">Red<br>
<input type="radio" name="colors" id="blue" onclick="selectionChanged()">Blue<br>
<input type="radio" name="colors" id="green">Green


<button type="button" onclick="check()">Check "Red"</button>
<button type="button" onclick="uncheck()">Uncheck "Red"</button>

【讨论】：

【解决方案3】：

好像没问题。尝试使用 firebug 进行调试，并在 firebug 中检查控制台是否有任何语法错误。

【讨论】：

【解决方案4】：

将所有单选按钮的 onclick 更改为 onchange，因为在 onchange 中的一些单选按钮和 onclick 中的一些单选按钮

<input type="radio" name="colors" id="red" onchange="selectionChanged()">Red<br>
<input type="radio" name="colors" id="blue" onchange="selectionChanged()">Blue<br>
<input type="radio" name="colors" id="green" onchange="selectionChanged()">Green

【讨论】：

【解决方案5】：

这是你想做的吗？

<script>
function check()
{
    document.getElementById("red").checked=true;
    selectionChanged();
}
function uncheck()
{
    document.getElementById("red").checked=false
    selectionChanged();
}
   function selectionChanged(){
   alert("checked");
}
</script>

因此您可以通过单击或按下按钮来输入函数“selectionChanged()”。

【讨论】：

+1 实际使它工作，onchange() 在这里似乎没有多大帮助。很高兴看到使用onchange() 的解决方案！

【解决方案6】：

你也可以这样调用 onClick 方法：

document.getElementById("radioButton").click()

【讨论】：

【解决方案7】：

您可以在通过 JS 选中/取消选中时手动触发事件。像这样……

document.getElementById("red").onchange();

警告：请检查与其他浏览器的兼容性，尤其是 IE，否则使用 jQuery 来完成。

【讨论】：