diferencia entre onClick() y onchange() (botones de radio)

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> 

yo estaba usando el código anterior y cuando hice clic en el segundo botón, pensé que debería tener dos eventos, uno desde el botón que consiguió sin control y otra desde el botón que se comprobó, porque lógicamente hablando, ambos botones cambiaron su estado, y he enlazado el evento onchange() y no el evento onclick(). pero como parece, solo obtengo un evento del botón que acaba de comprobarse. ¿Es este un comportamiento deseado en html? ¿Cómo puedo obtener un evento desde el botón si se desmarcó?

Answer 1

Uso esto para conseguir el comportamiento deseado: -

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

Espero que ayuda.

Answer 2

Ambas casillas de verificación conforman un único elemento HTML, cuyo nombre es group. Es por eso que solo obtienes un evento aquí.

Here es un ejemplo de demostración que muestra cómo iterar a través de cada una de las casillas de verificación separadas y acceder a sus valores.

Answer 3

Puede usar una variable para guardar el valor del botón de opción actual, de modo que cuando se active el evento, tenga guardado el valor del botón anterior, y podría usarlo, porque solo una vez, solo el botón de radio ser revisado. después de eso, puede guardar el valor revisado del botón de radio actualizado.

Answer 4

Al navegador, N botones de radio con un nombre son solo un control. Porque cuando quiere enviar los datos de la publicación (u obtener datos) al servidor, simplemente usa el atributo name como la clave del parámetro y el valor del botón de opción actualmente seleccionado que tiene ese atributo de nombre como el valor de la parámetro enviado Es por eso que debe nombrar atributos para radios de grupo juntos. Por lo tanto, el cambio no debe ocurrir lógicamente 10 veces para 10 radios. Desde el punto de vista del navegador, el valor del control group cambió de book_folder a book_chapter. Eso es todo.

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