Difference between onClick() and onChange() for radio buttons

<input type="radio" name="group" value="book_folder" onchange="makeRadioButtons()开发者_如何学JAVA">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 bound 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 behaviour in HTML? How can I get an event from the button if it got unchecked?

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.

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.

Here is a demo example which demonstrates how to iterate through each of the separate checkbox and access their values.

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 name attribute 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 group control changed from book_folder to book_chapter. That's all.

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.

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