Есть форма, в которой множество чекбоксов.
Для облегчения отмечания чекбоксов каждый из них помещен в <label>, что позволяет отмечать чекбокс, тыкая не только в саму коробочку, но и на любую часть текста в лэйбле.
Это работает везде, кроме, конечно, осла. В Эксплорере чекбокс плюет на лэйбл и отмечается ТОЛЬКО при кликании на коробочку чекбокса.
Из-за этого пришлось на лэйбл повесить событие "onclick", которое запускает скрипт, инвертирующий значение чекбокса (был отмечен - снимает, был не отмечен - ставит "cheсked")
Но тут всплыла неприятность - если лэйбл захватывает чекбокс, то в результате получаем некий баг:
1. Если кликать по лэйблу - все срабатывает и отмечается как надо.
2. если кликать по самому чекбоксу - он сначала ОТМЕЧАЕТ его, далее срабатывает событие на онклик-лэйбла и метка СНИМАЕТСЯ.
К сожалению, вынести лэйбл ЗА границы чекбокса нельзя (точнее - нежелательно), так как кликнуть могут как ДО чекбокса, так и после него (на тексте).
Как заблокировать повторную обработку, если чекбокс лежит внутри лэйбла, на котором висит онклик?
1. LShark - 05 Марта, 2013 - 14:09:58 - перейти к сообщению
2. EuGen - 05 Марта, 2013 - 14:28:34 - перейти к сообщению
3. LShark - 05 Марта, 2013 - 14:36:21 - перейти к сообщению
Значит, придется на сам чекбокс вешать тоже онклик с СcancelBubble ? Чтобы дальше не распространялось срабатывание?
4. DelphinPRO - 05 Марта, 2013 - 14:43:52 - перейти к сообщению
LShark пишет:
Из-за этого пришлось на лэйбл повесить событие "onclick", которое запускает скрипт, инвертирующий значение чекбокса (был отмечен - снимает, был не отмечен - ставит "cheсked")
рука-лицо.jpg
настоятельно рекомендую ознакомится со HTML спецификацией, уж коль скоро вы занимаетесь web-разработкой.
Для связи label и input (любого типа, включая textarea) должны быть использованы атрибуты "for" и "id" :
CODE (html):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <label for="mylink">text</label>
- <input id="mylink" type="checkbox"/>
Более того, вложение инпута в лейбл является семантически неверным ходом.
Кроме того, не нужно вешать событие на клик, следует прослушивать onchange у инпута.
