Javascript onClick() 和 onChange() 之间的区别（单选按钮）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6596353/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
difference between onClick() and onChange() (radio buttons)
提问by samach
<input type="radio" name="group" value="book_folder" onchange="makeRadioButtons()">Create New Book</input>
<input type="radio" name="group" value="book_chapter" onchange="makeCheckBoxes()">Create New Chapter</input>
i was using the above code and when i clicked the second radio button, i thought i should get two events, one from the button that got unchecked and other from the button that got checked, because logically speaking, both buttons got their state changed, and i have binded the onchange() event not the onclick() event. but as it seems i only get one event from the button that just got checked. is this a desired behavior in html? how can i get an event from the button if it got unchecked?
我正在使用上面的代码，当我点击第二个单选按钮时，我想我应该得到两个事件，一个来自未选中的按钮，另一个来自选中的按钮，因为从逻辑上讲，两个按钮的状态都改变了，我绑定了 onchange() 事件而不是 onclick() 事件。但看起来我只从刚刚检查的按钮中获得一个事件。这是 html 中想要的行为吗？如果未选中，我如何从按钮获取事件？
采纳答案by Knowledge Craving
Use this to get the desired behavior:-
使用它来获得所需的行为：-
var ele = document.getElementsByName('group');
var i = ele.length;
for (var j = 0; j < i; j++) {
if (ele[j].checked) { //index has to be j.
alert('radio '+j+' checked');
}
else {
alert('radio '+j+' unchecked');
}
}
Hope it helps.
希望能帮助到你。
回答by MD Sayem Ahmed
Both of these check boxes make up a single HTML element, whose name is group. That's why you are getting only one event here.
这两个复选框组成一个 HTML 元素，其名称为group. 这就是为什么您在这里只收到一个事件。
Hereis a demo example which demonstrates how to iterate through each of the separate checkbox and access their values.
这是一个演示示例，演示如何遍历每个单独的复选框并访问它们的值。
回答by Saeed Neamati
To browser, N radio buttons with one name are just one control. Because when it wants to send the post data (or get data) back to the server, it simply uses the nameattribute as the key of the parameter and the value of the currently selected radio button which has that name attribute as the value of the sent parameter. That's why you should name attribute to group radios together. So, onchange shouldn't logically occur 10 times for 10 radios. From the point of the browser, the value of the groupcontrol changed from book_folderto book_chapter. That's all.
对于浏览器来说，N 个同名的单选按钮只是一个控件。因为当它想要将 post 数据（或获取数据）发送回服务器时，它只是使用该name属性作为参数的键，并使用具有该 name 属性的当前选择的单选按钮的值作为发送的值范围。这就是为什么您应该命名属性以将无线电组合在一起。因此，对于 10 个无线电，onchange 不应该在逻辑上发生 10 次。从浏览器的角度来看，group控件的值从book_folder变为book_chapter。就这样。
回答by Parvesh Kumar Tandon
$(document).ready(function( ){
$( "input[name='group']" ).on(
{
'change' : function( )
{
$.each( $( "input[name='group']" ),
function( )
{
var ObjectId, ObjectValue;
if( $(this).is(':checked') )
{
/*Checked radio button OBJECT */
console.log(this); /* Jquery "this" Object */
ObjectId = $(this).attr( 'id' ); /* Id of above Jquery object */
ObjectValue = $(this).val( ); /* Value of above Jquery object */
}
else
{
/* UnChecked radio button OBJECT */
console.log(this); /* Jquery "this" Object */
ObjectId = $(this).attr( 'id' ); /* Id of above Jquery object */
ObjectValue = $(this).val( ); /* Value of above Jquery object */
}
}
);
}
}
);
});
回答by Ovais Khatri
You could use a variable to save vale of the current checked radio button, so when event is fired, you will have old checked button value save, and you could then use that, because at one time only once radio button will be checked. after that you could save the updated radio button checked value.
您可以使用一个变量来保存当前选中的单选按钮的值，因此当事件被触发时，您将保存旧的选中按钮值，然后您可以使用它，因为一次只会选中一次单选按钮。之后，您可以保存更新的单选按钮检查值。
