onClick()和onChange()之间的区别(单选按钮)

Question

<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>

我正在使用上面的代码,当我点击第二个单选按钮时,我想我应该得到两个事件,一个来自未经检查的按钮,另一个来自被检查的按钮,因为从逻辑上讲,两个按钮都改变了状态,我已经绑定了onchange()事件而不是onclick()事件.但似乎我只从刚刚检查过的按钮中得到一个事件.这是html中的理想行为吗？如果取消选中,如何从按钮获取事件？

Answer 1

使用它来获得所需的行为: -

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

希望能帮助到你.

Answer 2

这两个复选框组成一个HTML元素,其名称为group.这就是为什么你这里只举办一场比赛的原因.

这是一个演示示例,演示如何遍历每个单独的复选框并访问其值.

Answer 3

对于浏览器来说，N 个同名的单选按钮只是一个控件。因为当它想要将 post 数据（或获取数据）发送回服务器时，它只是使用该name属性作为参数的键，并使用具有该 name 属性的当前选择的单选按钮的值作为发送的值范围。这就是为什么您应该命名属性以将无线电组合在一起。因此，对于 10 个无线电，onchange 不应该在逻辑上发生 10 次。从浏览器的角度来看，group控件的值从book_folder变为book_chapter。就这样。