直接上代码
html部分
<div class="label_div">
<div class="checkbox">
<label for="row[data][options][]-10"><input id="row[data][options][]-10" name="row[data][options][]" type="checkbox" value="10"> 投保人证件号</label>
</div>
<div class="checkbox">
<label for="row[data][options][]-11"><input id="row[data][options][]-11" name="row[data][options][]" type="checkbox" value="11"> 投保人生日</label>
</div>
<div class="checkbox">
<label for="row[data][options][]-12"><input id="row[data][options][]-12" name="row[data][options][]" type="checkbox" value="12"> 投保人性别</label>
<label for="row[data][options][]-13"><input id="row[data][options][]-13" name="row[data][options][]" type="checkbox" value="13"> 男</label>
<label for="row[data][options][]-14"><input id="row[data][options][]-14" name="row[data][options][]" type="checkbox" value="14"> 女</label>
<label for="row[data][options][]-15"><input id="row[data][options][]-15" name="row[data][options][]" type="checkbox" value="15"> 未知</label>
</div>
</div>
实现效果为：
1、点击第一个选项卡，后面所有的都选中或者都取消
2、点击后面的子项，如果存在子项，则第一个始终是选中状态， 否则第一个就是未选中状态
js代码
1 $(".label_div input[type='checkbox']").click(function () { // 为label_div下的所有checkbox都添加点击事件
2 var obj = $(this).parent().parent();
3 if (!$(this).parent().index()) { //获取checkbox下同级label的索引位置
4 if (this.checked) {
5 $(obj).find('label').find('input').prop('checked',true);
6 } else {
7 $(obj).find('label').find('input').prop('checked',false);
8 }
9 }
10 if (this.checked) {
11 $(obj.find('label')[0]).find('input').prop('checked',true);
12 } else {
13 if ($(obj.find('label')).find('input:checked:checked').length == 1) { //判断某.checkbox的div下的所有checkbox选中的长度
14 $(obj.find('label')[0]).find('input').prop('checked',false);
15 }
16 }
17 })
里面牵扯到获取父级元素，以及同级中的索引位置，js好久没写了，先记录一下，大佬请忽略！