前端三级checkbox选择 / JS三级checkbox选择 / JS三级勾选

这里的html是php循环出来的,不做过多解释,在对应的一级,二级,三级调用
GouXuan()这个就可以了。
我这里的GouXuan方法有5个参数,
第一个参数this不变
第二个参数和第三个参数是写在在二级和三级里面的
第四个参数写在三级里面的

和第五个参数是写在三级的GouXuan()用来验证是否全选

(有问题就留言或qq1104534940,望能解决问题。新手,有大神有更好的解决方法请赐教)

效果图 2017-11-14 周未一级,11-16周四未二级, 11-18 周六为二级,其余为3级

<!-- 一级 {{$jihua["zhou"]}}{{$jihua["uid"]}}zhou 验证是否全选 -->
                  <input type="checkbox" onclick="GouXuan(this,'{{$jihua["zhou"]}}','{{$jihua["uid"]}}','','')" class="checkbox {{$jihua["zhou"]}}{{$jihua["uid"]}}zhou" name="" value=""><i></i>

<!-- 二级 {{$jihua['zhou']}}{{$jihua["uid"]}}一级全选 {{$jihua['zhou']}}{{$jihua["uid"]}}{{$Zhoujihua["ri_qi"]}}ri-qi 验证是否全选 -->
                  <input type="checkbox" class="checkbox {{$jihua['zhou']}}{{$jihua["uid"]}} {{$jihua['zhou']}}{{$jihua["uid"]}}{{$Zhoujihua["ri_qi"]}}ri-qi " onclick="GouXuan(this,'{{$jihua["zhou"]}}','{{$jihua["uid"]}}','{{$Zhoujihua["ri_qi"]}}','')" value="1"><i></i>


<!-- 三级 {{$jihua['zhou']}}{{$jihua["uid"]}}一级全选 {{$jihua['zhou']}}{{$jihua["uid"]}}{{$Zhoujihua["ri_qi"]}}二级全选 -->
                  <input type="checkbox" class="checkbox {{$jihua['zhou']}}{{$jihua["uid"]}} {{$jihua['zhou']}}{{$jihua["uid"]}}{{$Zhoujihua["ri_qi"]}}" onclick="GouXuan(this,'{{$jihua["zhou"]}}','{{$jihua["uid"]}}','{{$Zhoujihua["ri_qi"]}}','{{$day["id"]}}')" value="1"><i></i>

// checkbox开始
// 一级标识 是否全选的作用 {{$jihua["zhou"]}}{{$jihua["uid"]}}zhou 
var zhous = "zhou";
// 二级标识 是否全选的作用 {{$jihua['zhou']}}{{$jihua["uid"]}}{{$Zhoujihua["ri_qi"]}}ri-qi
var riqis = "ri-qi";
// 选择
// thiss this
// zhou 标识1 一级
// uid 标识2 一级
// ri_qi 标识3 二级
// id 标识4 三级
function GouXuan(thiss,zhou,uid,ri_qi,id){
  var s_this = $(thiss);



  // 判断周是否全选
  if(id != ""){
    // 验证日期是否勾选
    isQuanXuan('.'+zhou+uid+ri_qi,'ri-qi')
    // 验证周是否勾选
    isQuanXuan('.'+zhou+uid,'zhou')
  }else{
    // 全选
    XuanZhongCheckbox('.'+zhou+uid+ri_qi,s_this[0].checked)
  }

  // 判断是否全选
  if(ri_qi != ""){
    // 验证周是否勾选
    isQuanXuan('.'+zhou+uid,'zhou')
  }
  
}

// 验证是否全选
function isQuanXuan(checkbox,bs){
  var num = 0
  var trueNum = 0
  $(checkbox+','+checkbox).each(function(){
    var s_this = $(this)
    if(s_this[0].checked){
      trueNum++
    }
    num++
  }); 
    console.log(num+'|'+trueNum)

  if(num != trueNum){
    var s_this = $(checkbox+bs)
    s_this[0].checked = false
  }
  if(num == trueNum){
    var s_this = $(checkbox+bs)
    s_this[0].checked = true
  }
}


// 给对应checkbox赋值
function XuanZhongCheckbox(checkbox,checked){
  $(checkbox+','+checkbox).each(function(){
    var s_this = $(this)
    s_this[0].checked = checked
  }); 
}

// checkbox结束