JQuery переключая флажки при нажатии родительского DIV

Question

Здесь я имею набор флажков с ярлыками, лейблами с в div.checkbox

Я хочу, чтобы переключить флажки при нажатии родительской div.checkbox

HTML

<div class="checkbox"> 
    <input id="checkbox-1" type="checkbox" name="Data1" value="option1" /> 
    <label for="checkbox-1">HTML</label> 
    <br /> 
    <input id="checkbox-2" type="checkbox" name="Data2" value="option2" /> 
    <label for="checkbox-2">CSS</label> 
    <br /> 
    <input id="checkbox-3" type="checkbox" name="Data3" value="option3" /> 
    <label for="checkbox-3">HTML</label> 
    <br /> 
    <input id="checkbox-4" type="checkbox" name="Data4" value="option4" /> 
    <label for="checkbox-4">CSS</label> 
</div> 

Jquery

$('.checkbox').click(function(){ 
    var el = $('.checkbox input[type=checkbox]') 
    if(el.is(':checked')){ 
      find(el).removeAttr('checked'); 
    } 
    else { 
     el.attr('checked','checked'); 
    } 
}); 

working demo

Как я могу это сделать, пожалуйста, может ли один помочь мне

Благодаря

Answer 1

Вы должны использовать .prop() вместо .attr() для установки проверяемого Значение свойства

$('.checkbox').click(function(){ 
    $(this).find('input[type=checkbox]').prop('checked', function(){ 
     return !this.checked; 
    }); 
}); 

Демонстрация: Fiddle

Answer 2

Изменение

var el = $('.checkbox input[type=checkbox]') 

в

var el = $(this) 

DEMO

Answer 3

Вы можете использовать .find для ограничения объема к щелкнули элемента:

$('.checkbox').click(function(){ 
    $(this).find(":checkbox").prop('checked', function(){ 
     return !this.checked; 
    }); 
}); 

Вот рабочий fiddle.

Answer 4

Это должно добавить еще одно событие обработки, чтобы вызвать «флажок» сам по себе является щелчок:

$(document).on('click','.checkbox input[type=checkbox]', function(e){ 
    e.stopPropagation(); 
});