Почему функция срабатывает два раза?

Question

[Angelina_Jo]

Нужно:

Узнать состояние чекбокса и в зависимости от его состояния поменять стиль label в котором он расположен. И ещё, если чекбокс выбирается, увеличить счётчик на 1. А если чекбокс снимается, тогда уменьшить счётчик на 1.

Делаю так:

Функция selectChk вызывается событием onClick - у каждого label.

<label id="label_id_1" onClick="selectChk(1);">
<input class="chk_id_1" type="checkbox" name="num[]" value="1">
1</label>

<label id="label_id_2" onClick="selectChk(2);">
<input class="chk_id_2" type="checkbox" name="num[]" value="2">
2</label>

...

cnt = 0;

function selectChk(number_chk) {

z = $('.chk_id_'+number_chk).prop("checked");

if (z) {

$('.label_id_'+number_chk).css({'border-color':'#ff0000','font-weight':'bold'});
cnt--;
alert(z);
//Если чекбокс был выбран до вызова функции, считаем его деактивированным и уменьшаем счётчик

}
else {

$('.label_id_'+number_chk).css({'border-color':'#ffffff','font-weight':'normal'});
cnt++;
alert(z);
//Если чекбокс не был выбран до вызова функции, считаем его активированным и увеличиваем счётчик

}

}

Подскажите, пожалуйста, почему срабатывают оба условия подряд?

Comments

[Сергей]

а где код, который навешивает обработчик? проблема то скорее там

[Angelina_Jo]

Сергей: Как это? :-) Функция же вызывается через OnClick. :-)

[Сергей]

Angelina_Jo: click - это событие, selectChk - это обработчик. Я спрашиваю, где вы навешиваете на onclick этот обработчик

Answer 1

[Евгений Петров]

Ну всё это проще делается.

Comments

[Angelina_Jo]

Спасибо огромное. :-)

[Angelina_Jo]

Только вот мне придётся тебе ботанить и ботанить, чтобы понимать это гениальное решение. :-)

[Евгений Петров]

Angelina_Jo: Доброе слово и кошке приятно, но ей богу — это обычное решение. Есть и другие варианты, но все базируются именно на отслеживании смены состояния input.
На будущее — не нужно отслеживать клик на кнопке для отправки формы, а саму отправку. Это всё примерно из той же оперы:)

Answer 2

[L0k1]

onChange же, а не onClick и не будет двойного срабатывания по идее

Comments

[Angelina_Jo]

Спасибо. ) onChange работает. ) Но почему onClick так странно срабатывает? :-)

[Евгений Петров]

Angelina_Jo: Вы точно хотите разбираться в деталях, как связана работа label + input? Нужно отслеживать те события, которые нужны.
На элементе label производится click не просто для клика, а для смены состояния того input, к которому он относится.

[Angelina_Jo]

Евгений Петров: Спасибо. :-) Постараюсь запомнить и не забыть. )