Предотвращение снятия флажка, когда триггер щелчка находится на родительском элементе

Question

Какая-то забавная проблема здесь.

Я хочу установить флажок, когда родительский div отмечен, но он удаляет флажок, когда нажата кнопка CHECKBOX;)

Отлично работает при нажатии на имя. Как мне решить это?

//layout
<div class="parent">
   <input type="checkbox"/> <a>Name</a>
</div>

//check the box when parent div is clicked
$(".parent").click(function(event){
   event.preventDefault();
   checkbox=$(this).find("input:checkbox");
   checkbox.attr("checked","checked");
});

Answer 1

Попробуйте это.

<div class="parent">
   <input type="checkbox" class="check"/> <a>Name</a>
</div>

$(".parent").click(function(event){
    $(".check:not(:checked)").attr('checked','checked');
});
$(".check").click(function(event){
   event.stopPropagation();
});

jsFiddle is здесь

Answer 2

Попробуйте добавить:

event.stopPropagation();
return false;

в ваш обработчик событий.

Итак, ваш код выглядит так:

//layout
<div class="parent">
   <input type="checkbox"/> <a>Name</a>
</div>

//check the box when parent div is clicked
$(".parent").click(function(event){
   event.stopPropagation();
   event.preventDefault();

   checkbox=$(this).find("input:checkbox");
   checkbox.attr("checked","checked");

   return false;
});

...

Документация для event.stopPropagation ():
http://api.jquery.com/event.stopPropagation/

Answer 3

Я не пробовал, но я подозреваю, что вы можете предотвратить запуск действия родителя, предотвращая всплывающее событие, например:

$(".parent input:checkbox").click(function(event) {
  event.stopPropagation();
});

В качестве альтернативы, вы можете просто поместить обработчик щелчков на<a>Name</a> или используйте элемент <label> без добавления JS (это именно то, для чего <label>).