Разница между 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 текущего переключаемого переключателя, поэтому при запуске события у вас будет сохраненное значение сохраненной кнопки, и вы можете использовать это, потому что в одно время только один раз будет переключаться проверено. после этого вы можете сохранить обновленное значение переключателя.