#javascript #checkbox #onclick #click #onchange
#javascript #флажок #onclick #нажмите #onchange
Вопрос:
Я пытаюсь определить, когда произошло изменение флажка (флажков), но до сих пор безуспешно пытался использовать onchange, onclick и [just] click. Я «унаследовал» HTML для флажков (созданных с помощью шаблонов Smarty), которые созданы в соответствии с here:-
<input type="checkbox" name="field1[]" id="field1_1" value="80000" />
<label for="field1_1">80000</label>
<input type="checkbox" name="field1[]" id="field1_2" value="80001" />
<label for="field1_2">80001</label>
<input type="checkbox" name="field1[]" id="field1_3" value="80002" />
<label for="field1_3">80002</label>
<input type="checkbox" name="field1[]" id="field1_4" value="80003" checked />
<label for="field1_4">80003</label>
<input type="checkbox" name="field1[]" id="field1_5" value="80004" />
<label for="field1_5">80004</label>
<input type="checkbox" name="field1[]" id="field1_6" value="80005" />
<label for="field1_6">80005</label> В javascript я объявляю объект для флажков, как указано здесь:-
<script>
parent_obj_field1 = document.getElementsByName('field1[]');
</script>
Затем я объявляю функцию ‘click’ для этого объекта, который сам предназначен для запуска другой функции ‘retrieve’. Более поздняя функция извлечения выполняет вызов AJAX на основе значений флажков и заполняет другой элемент управления.
<script>
parent_obj_field1[0].click = function() {
child_obj_field3_retrieve_data();
}
</script>
Я заменил «щелчок», показанный здесь, на «при изменении» и «onclick», но безрезультатно. Я прочитал несколько статей, в том числе одну, в которой говорится, что мне, возможно, придется добавить прослушиватель событий… но я не совсем уверен в синтаксисе, необходимом в моем случае?
Не могли бы вы посоветовать, как я запускаю событие, когда пользователь нажимает / снимает любой из флажков в коллекции?
Спасибо
Редактировать
Итак, чтобы расширить комментарий Саурабха Шриваставы, я добавил
parent_obj_field1[0].addEventListener('change', function (event) {alert('changed') });
но не появляется предупреждение, когда я нажимаю на любой из флажков? Возможно, я неправильно понимаю, как это работает?
Комментарии:
1. Не могли бы вы предоставить jsfiddle с тем, что у вас есть на данный момент, чтобы мы могли протестировать и проверить проблему для себя.
2. Вы прикрепляете обработчик событий
field1[]только к первому элементу, и если вы хотите прикрепить его к остальным элементам, вам придется выполнить итерацию. Если вы хотите присоединить его к динамически генерируемым элементам, полученным с помощью ajax, вам необходимо присоединить обработчик событий после загрузки и вставки элементов или использовать делегированный обработчик событий, что может быть немного сложнее, если не использовать библиотеку (например, jQuery).3. используйте этот код
parent_obj_field1[0].addEventListener('change', function (event) { }4. привет… Означает ли добавление этого прослушивателя событий, что мне не нужно изменять HTML-теги?
5. Итак, я добавил parent_obj_field1[0].addEventListener(‘change’, функция (событие) {оповещение (‘изменено’) }); но не получаете предупреждение, когда я нажимаю на любой из полей? Возможно, я неправильно понимаю, как это работает?
Ответ №1:
Добавьте onclick="toggleCheckbox(this)" в каждый из ваших флажков. Затем используйте этот javascript.
<script>
function toggleCheckbox(item)
{
alert(item.id);
}
</script>
Комментарии:
1. Привет… Согласно Рахулу Пателю….. К сожалению, поскольку я «унаследовал» способ построения HTML, было бы сложно добавить onclick к тегам ввода.
Ответ №2:
Используйте атрибут onchange в HTML и используйте в нем обычную функцию и передавайте this object в качестве аргумента в нем.
Вы можете легко установить флажок установлен или нет в функции и выполнить соответствующую операцию.
Пожалуйста, проверьте приведенный ниже фрагмент
function change_checkbox(el){
if(el.checked){
alert(el.value " : checked");
}else{
alert(el.value " : un-checked");
}
} <input type="checkbox" name="field1[]" onchange="change_checkbox(this)" id="field1_1" value="80000" /> <label for="field1_1">80000</label>
<input type="checkbox" name="field1[]" onchange="change_checkbox(this)" id="field1_2" value="80001" /> <label for="field1_2">80001</label>
<input type="checkbox" name="field1[]" onchange="change_checkbox(this)" id="field1_3" value="80002" /><label for="field1_3">80002</label>
<input type="checkbox" name="field1[]" onchange="change_checkbox(this)" id="field1_4" value="80003" checked /><label for="field1_4">80003</label>
<input type="checkbox" name="field1[]" onchange="change_checkbox(this)" id="field1_5" value="80004" /><label for="field1_5">80004</label>
<input type="checkbox" name="field1[]" onchange="change_checkbox(this)" id="field1_6" value="80005" /><label for="field1_6">80005</label> Комментарии:
1. Привет… К сожалению, поскольку я «унаследовал» способ построения HTML, было бы сложно добавить onchange к входным тегам.
Ответ №3:
Изменение jQuery должно сделать свое дело.
Событие изменения отправляется элементу при изменении его значения. Это событие ограничено <input> элементами, <textarea> блоками и <select> элементами. Для флажков, флажков и переключателей событие запускается немедленно, когда пользователь делает выбор с помощью мыши, но для других типов элементов событие откладывается до тех пор, пока элемент не потеряет фокус.
https://api.jquery.com/change/
$( ".change-selector" ).change(function() {
//execute your code
});
<input class="change-selector" type="checkbox" name="field1[]" id="field1_1" value="80000" /> <label for="field1_1">80000</label>
<input class="change-selector" type="checkbox" name="field1[]" id="field1_2" value="80001" /> <label for="field1_2">80001</label>
<input class="change-selector" type="checkbox" name="field1[]" id="field1_3" value="80002" /><label for="field1_3">80002</label>
<input class="change-selector" type="checkbox" name="field1[]" id="field1_4" value="80003" checked /><label for="field1_4">80003</label>
<input class="change-selector" type="checkbox" name="field1[]" id="field1_5" value="80004" /><label for="field1_5">80004</label>
<input class="change-selector" type="checkbox" name="field1[]" id="field1_6" value="80005" /><label for="field1_6">80005</label>