jQuery 实现checkbox的选择

直接上代码

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代码

    $(".label_div  input[type='checkbox']").click(function () {  // 为label_div下的所有checkbox都添加点击事件
        var obj = $(this).parent().parent();
        if (!$(this).parent().index()) { //获取checkbox下同级label的索引位置
            if (this.checked) {
                $(obj).find('label').find('input').prop('checked',true);
            } else {
                $(obj).find('label').find('input').prop('checked',false);
            }
        }
        if (this.checked) {
            $(obj.find('label')[0]).find('input').prop('checked',true);
        } else {
            if ($(obj.find('label')).find('input:checked:checked').length == 1) { //判断某.checkbox的div下的所有checkbox选中的长度
                $(obj.find('label')[0]).find('input').prop('checked',false);
            }
        }
    })

里面牵扯到获取父级元素，以及同级中的索引位置，js好久没写了，先记录一下，大佬请忽略！