HTML-код:
<div id="txtAge">
<table>
<tr>
<td><input type="checkbox" onclick="checking()" id="ch1" value="1"><td>
<td><input type="checkbox" onclick="checking()" id="ch2" value="10"><td>
<td><input type="checkbox" onclick="checking()" id="ch3" value="12"><td>
<td><input type="checkbox" onclick="checking()" id="ch4" value="3"><td>
</tr>
<tr>
<td><input type="checkbox" onclick="checking()" id="ch5" value="221"><td>
<td><input type="checkbox" onclick="checking()" id="ch6" value="130"><td>
<td><input type="checkbox" onclick="checking()" id="ch7" value="132"><td>
<td><input type="checkbox" onclick="checking()" id="ch8" value="3333"><td>
</tr>
</table>
</div>
Javascript:
function checking(){
$('input[type="checkbox"]').on('change', function() {
$(this).closest('tr').find('input').not(this).prop('checked', true);
alert(this.value);
});
}
Это мой код когда я нажимаю флажок, он предупреждает один раз, когда я нажимаю другой флажок, он предупреждает 2 раза. Почему функция onclick срабатывает более 1 раза, когда я продолжаю нажимать флажок?
Вот демо:
http://jsfiddle.net/L9z9t04p/11/
5 ответов
Удалите onclick="checking"
как встроенный атрибут из флажка.
Оба будут работать независимо, и вы можете добавить столько слушателей событий к элементу, сколько захотите, так что один не удалит другой автоматически.
Также удалите этот метод проверки, вы можете напрямую связать событие jquery.on
$('input[type="checkbox"]').on('change', function() {
$(this).closest('tr').find('input').not(this).prop('checked', true);
alert(this.value);
});
Или если вы не хотите удалять метод checking
и вызывать его при каких-то условиях, вам необходимо убедиться, что метод checking
вызван
function checking(){
$('input[type="checkbox"]').off('change' ); //if the checking() is called multiple times
$('input[type="checkbox"]').on('change', function() {
$(this).closest('tr').find('input').not(this).prop('checked', true);
alert(this.value);
});
}
checking();
Проблема возникает из-за того, что вы привязываете обработчик событий change
к каждому встроенному обработчику событий изменения. это продолжит добавлять обработчик событий, и вы будете получать несколько alert
в этом случае.
Удалите встроенный обработчик событий change
из вашего флажка. Как вы уже связываете его с помощью jQuery.
HTML
<input type="checkbox" id="ch5" value="221">
< EM> Script
$(document).ready(function(){
$('input[type="checkbox"]').on('change', function() {
$(this).closest('tr').find('input').not(this).prop('checked', true);
alert(this.value);
});
});
Связываете ли вы событие через слушателя:
$('input[type="checkbox"]').on('change', function() {
Или вы делаете встроенную привязку к функции:
<td><input type="checkbox" onclick="checking()" id="ch2" value="10"><td>
Не выполняйте оба. Происходит то, что каждый раз, когда вы нажимаете на флажок, вы регистрируете функцию еще раз для события. Таким образом, каждый щелчок предупредит еще раз, что в последний раз
Удалить onclick = "check ()" из HTML и связать событие изменения для флажка только один раз
Каждый раз, когда вы запускаете проверку функции, вы добавляете событие ко всем флажкам. Он будет накапливаться при каждом нажатии. Я попробовал это в вашей скрипке, и это работает:
$(document).ready(function() {
$('input[type="checkbox"]').on('change', function() {
$(this).closest('tr').find('input').not(this).prop('checked', false);
alert(this.value);
});
});
Кроме того, удалите вызов onclick на своих флажках.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.