2

在这里，我在 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>

查询

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

工作演示

我该怎么做，请任何人帮助我

谢谢

4

4 回答 4

5

您需要使用.prop()而不是.attr()设置选中的属性值

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

演示：小提琴

于 2013-09-09T11:14:34.840 回答
1

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

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

这是一个工作小提琴。

于 2013-09-09T11:15:34.557 回答
0

它应该添加另一个事件处理来触发“复选框”本身被点击：

$(document).on('click','.checkbox input[type=checkbox]', function(e){
    e.stopPropagation();
});
于 2014-12-02T04:16:45.003 回答
0

改变

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

至

  var el = $(this)

演示

于 2013-09-09T11:14:44.800 回答