Javascript 单选按钮的onClick（）和onChange（）之间的差异 创建新书 谱写新篇章

我正在使用上面的代码，当我单击第二个单选按钮时，我想我应该得到两个事件，一个来自未选中的按钮，另一个来自已选中的按钮，因为从逻辑上讲，两个按钮的状态都发生了更改，我绑定了

onchange（）

事件而不是

onclick（）

事件。但我似乎只从刚刚检查过的按钮中得到一个事件。这在HTML中是一种理想的行为吗？如果按钮未选中，如何从中获取事件？

这两个复选框组成一个HTML元素，其名称为

group

。这就是为什么这里只有一个活动

---

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

您可以使用一个变量来保存当前选中单选按钮的值，因此当触发事件时，您将保存旧的选中按钮值，然后可以使用该值，因为一次只能检查一次单选按钮。之后，您可以保存更新的单选按钮选中值。

使用此选项可获得所需的行为：-

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

var ele=document.getElementsByName（'group'）；
var i=长度；
对于（var j=0；j

---

希望有帮助。

对于浏览器，N个单选按钮和一个名称只是一个控件。因为当它想要将post数据（或get数据）发送回服务器时，它只需使用

name

属性作为参数的键，并使用当前选择的单选按钮的值作为发送参数的值，该单选按钮具有该name属性。这就是为什么您应该将属性命名为组收音机的原因。所以，逻辑上10台收音机的onchange不应该发生10次。从浏览器的角度来看，

组

控件的值从

book\u文件夹

更改为

book\u章节

。就这些。

谢谢你的回复。但是如果我取消对它们的分组…它们都可以同时被选择..我想一次只选择一个按钮@Salman然后您可能希望使用jQuery使用事件的id属性将事件附加到无线电。检查这把小提琴：非常感谢你…事实上，解决方案是根据它们的“值”属性来区分和执行操作！！意思是我应该从每个onchange事件调用这个函数？我刚刚发现…如果我使用

ele.length它工作正常…并且它告诉我们检查和取消检查了哪个单选按钮…唯一的prblm是我们被迫遍历组中的所有按钮。请检查我的更新答案并查看是否仍然得到“
null
”值。不仍在工作…prblm处于
ele.count（）
状态…这可能是浏览器问题？我用的是chrome！好吧，这可能就是原因，因为我还没有检查过Chrome。知道你很好地解决了问题，听起来还是很棒！
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');
    }
}

 $(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 */
                                 }
                               }
                             );
                     }
        }
     );
  });