Разница между onClick() и onChange() (переключателями)

<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? как я могу получить событие от кнопки, если он не снят?

Ответ 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');
    }
}

Надеюсь, что это поможет.

Ответ 2

Оба эти флажка составляют один элемент HTML, имя которого group. Вот почему вы получаете только одно событие здесь.

Здесь - демонстрационный пример, демонстрирующий, как выполнять итерацию по каждому отдельному флажку и получать доступ к их значениям.

Ответ 3

В браузере N переключателей с одним именем - это всего лишь один элемент управления. Поскольку, когда он хочет отправить данные сообщения (или получить данные) обратно на сервер, он просто использует атрибут name в качестве ключа параметра и значения выбранного в настоящий момент радиокнопки, который имеет этот атрибут имени в качестве значения от отправленного параметра. Вот почему вы должны указывать атрибут для группировки радиостанций вместе. Таким образом, onchange не должен логически возникать 10 раз для 10 радиостанций. С точки зрения браузера значение элемента управления group изменилось с book_folder на book_chapter. Это все.

Ответ 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 */
                                 }
                               }
                             );
                     }
        }
     );
  });

Ответ 5

Вы можете использовать переменную, чтобы сохранить vale текущего переключаемого переключателя, поэтому при запуске события у вас будет сохраненное значение сохраненной кнопки, и вы можете использовать это, потому что в одно время только один раз будет переключаться проверено. после этого вы можете сохранить обновленное значение переключателя.