różnica między onClick() i onChange() (przyciski radiowe)

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> 

używałem powyższy kod i kiedy kliknął drugi przycisk opcji, myślałem, że powinien dostać dwie imprezy, jedna z przycisku, który dostał niekontrolowany i inne z przycisku, który został sprawdzony, ponieważ logicznie rzecz biorąc, oba przyciski zmieniły swój stan, a ja zawiązałem zdarzenie onchange(), a nie zdarzenie onclick(). ale jak się wydaje, dostałem tylko jedno zdarzenie z przycisku , które właśnie zostało sprawdzone. czy jest to pożądane zachowanie w html? jak mogę uzyskać zdarzenie z przycisku, jeśli zostało odznaczone?

Answer 1

Użyj tego, aby uzyskać pożądane zachowanie: -

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

Nadzieję, że to pomaga.

Answer 2

Oba te pola wyboru składają się na pojedynczy element HTML, którego nazwa to group. Dlatego dostajesz tylko jedno wydarzenie tutaj.

Here to przykład demonstracyjny, który demonstruje sposób iteracji w każdym z oddzielnych pól wyboru i uzyskania dostępu do ich wartości.

Answer 3

Możesz użyć zmiennej do zapisania vale bieżącego zaznaczonego przycisku radiowego, więc gdy zdarzenie zostanie uruchomione, będziesz mieć zapisany stary przycisk wyboru wartości, a możesz go użyć, ponieważ w tym samym czasie tylko raz przycisk radiowy będzie być sprawdzonym. po tym można zapisać zaktualizowaną wartość przycisku radiowego.

Answer 4

Do przeglądarki N przycisków radiowych o jednej nazwie to tylko jedna kontrolka. Ponieważ kiedy chce wysłać dane pocztowe (lub uzyskać dane) z powrotem do serwera, po prostu używa atrybutu name jako klucza parametru i wartości aktualnie wybranego przycisku opcji, który ma ten atrybut nazwy jako wartość wysłany parametr. Właśnie dlatego powinieneś nazwać atrybut grupując razem radiotelefony. Tak więc zmiana nie powinna następować logicznie 10 razy dla 10 radia. Z punktu przeglądarki wartość kontrolki group zmieniła się z book_folder na book_chapter. To wszystko.

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