Как правильно реализовать выделение checkbox при клике на строку таблицы tr?

Question

[Михаил]

Удалось реализовать почти рабочий пример на jsfiddle.
В принципе при клике на tr checkbox меняет своё состояние. Но есть одна проблема:

При нажатии непосредственно на checkbox он видимо сначала меняет состояние от клика, а потом срабатывает мой скрипт и checkbox снова меняет своё состояние на исходное.

Хочу сделать имитацию label, но в таблице.

Подскажите, пожалуйста, как решить данную проблему?

Answer 1

[Mikhail Osher]

jsfiddle.net/6bdt4149/1

// EDIT: в комментариях попросили уточнить, что происходит.

При клике на TR вызывается функция clickTr. Само собой, что это событие вызовется при клике на дочерние элементы (конечно, есть всякие bubbling/useCapture, подробнее - https://developer.mozilla.org/ru/docs/Web/API/Even...).

У всех обработчиков событий первым параметром передается объект Event. Ключ target содержит элемент, который вызвал событие.

Мы проходим по всем input в TR. Логично, что чекбокс работает прекрасно сам по себе, и если он является Event.target, то для него наш обработчик выполнять не надо.

Надеюсь, объяснил популярно.

var tr = document.getElementsByTagName("tr"),
    i = tr.length;

while (i--) {
    tr[i].onclick = clickTr;
}

function clickTr(event) {
    var inputs = this.getElementsByTagName('input');
    for (var x = 0; x < inputs.length; x++) {
        if (inputs[x] !== event.target && inputs[x].type == 'checkbox') {
            inputs[x].checked = !(inputs[x].checked);
        }
    }
}

Comments

[Михаил]

Спасибо огромное! Мне ещё учиться и учиться...

[Mikhail Osher]

Михаил: Все когда-то учились.) Успехов.)

[keslo]

Какая идея в данной проверке?
inputs[x] !== event.target

[Mikhail Osher]

keslo: что данный инпут не является элементом, на который кликнули в пределах TR. Соответственно, для не него не надо выполнять функцию, и чекбокс сам сделает всю работу.

[keslo]

Mikhail Osher: т.е. убираем переопределение в другую позицию при событии самого input[checkbox]?

[Mikhail Osher]

keslo: Сейчас обновлю ответ.