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。这就是为什么你在这里只举办一个活动。

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

Answer 3

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

Answer 4

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

Answer 5

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

onClick（）和onChange（）之间的区别（单选按钮）

5 个答案: