JQuery在单击父div时切换复选框

在这里，我有一组复选框，在div.checkbox中有标签

我想在单击parent 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>

请问我该怎么做，有人能帮我吗

---

谢谢

您需要使用

.prop（）

而不是

.attr（）

来设置选中的属性值

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

演示：更改

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

到

您可以使用将范围限制为单击的元素：

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

---

这是一个工作模式。

它应该添加另一个事件处理，以触发正在单击的“复选框”：

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

---

如果我有多个div，那么？@NareshKamireddy

$（this.find（'input[type=checkbox'））.length请你能让fiddleit使复选框在点击复选框时行为怪异吗
$('.checkbox').click(function(){
    $(this).find(":checkbox").prop('checked', function(){
        return !this.checked;
    });
});

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