区别

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

你可以使用一个变量来保存当前选中的单选按钮的山谷，因此，当事件被触发，你将有旧检查按钮值保存，然后你可以使用，因为在同一时间只有一次，单选按钮会被检查。之后，您可以保存更新的单选按钮选中的值。

Answer 4

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

Answer 5

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