一、樣式
二、話不多說，上代碼
html:
<span οnclick="onclickMemu(this.id);" id="011"> <!--permissionCode+'1'-->
<img id="123456false" src="checkfalse.png " ><!--permissionId+'false'-->
<img id="123456true" style="display: none;" src="checktrue.png" ><!--permissionId+'true'--><input type="checkbox" style="display: none;" name="zwt" id="123456"
value="123456+01+null"/><!-- permissionId+'+'+permissionCode+'+'+permissionFCode -->
<img src= "topMenu.png" class="layui-circle" >
<span>手機</span>
</span>
<br>
<span οnclick="onclickMemusun(this.id);" id="234567+123"><!--permissionId+'+123'-->
<span class="012"><!--permissionFCode+'2'-->
   
<img id="234567false" src="checkfalse.png " ><!--permissionId+'false'-->
<img id="234567true" style="display: none;" src="checktrue.png" ><!--permissionId+'true'--><input type="checkbox" style="display: none;" name="zwt" id="234567"
value="234567+0101+01"/><!-- permissionId+'+'+permissionCode+'+'+permissionFCode -->
<img src="lowMenu.png " class="layui-circle" >
<span >蘋果手機</span>
</span>
</span>
<br>
<span οnclick="onclickMemusun(this.id);" id="345678+123"><!--permissionId+'+123'-->
<span class="012"><!--permissionFCode+'2'-->
   
<img id="345678false" src="checkfalse.png " ><!--permissionId+'false'-->
<img id="345678true" style="display: none;" src="checktrue.png" ><!--permissionId+'true'--><input type="checkbox" name="zwt" style="display: none;" id="345678"
value="345678+0102+01"/><!-- permissionId+'+'+permissionCode+'+'+permissionFCode -->
<img src="lowMenu.png " class="layui-circle" >
<span >安卓手機</span>
</span>
</span>
<br>
<span οnclick="onclickMemusun(this.id);" id="456789+123"><!--permissionId+'+123'-->
<span class="012"><!--permissionFCode+'2'-->
   
<img id="456789false" src="checkfalse.png " ><!--permissionId+'false'-->
<img id="456789true" style="display: none;" src="checktrue.png" ><!--permissionId+'true'--><input type="checkbox" name="zwt" style="display: none;" id="456789"
value="456789+0103+01"/><!-- permissionId+'+'+permissionCode+'+'+permissionFCode -->
<img src="lowMenu.png " class="layui-circle" >
<span >諾基亞手機</span>
</span>
</span>
js:
function onclickMemusun(id){
var imgid =id;
var ob = id.split("+");
imgid = ob[0];
var text12 = $("#" + imgid).val();
var ob1 = text12.split("+");
var id1 = ob1[0];
var code = ob1[1];
var fcode = ob1[2];
if(!$("#" + fcode + "1 input[name='zwt']").prop("checked")) {
$("#" + fcode + "1 input[name='zwt']").prop("checked",true);
var fatherId = $("#" + fcode + "1 input[name='zwt']").attr("id");
$("#" + fatherId +"true").show();
$("#" + fatherId +"false").attr('style','display:none');
}
if(!$("#" + imgid).prop("checked")) {
$("#" + imgid).prop("checked",true);
$("#" + imgid+"true").show();
$("#" + imgid+"false").attr('style','display:none');
}else{
$("#" + imgid).prop("checked",false);
$("#" + imgid+"false").show();
$("#" + imgid+"true").attr('style','display:none');
}
var txt = "";
$("." + fcode + "2 input[name='zwt']").each(function() {
var currEle = $(this);
if(currEle.prop("checked")){
txt += "1";
}
});
if(txt == ""){
$("#" + fcode + "1 input[name='zwt']").prop("checked",false);
$("#" + $("#" + fcode + "1 input[name='zwt']").attr("id")+"false").show();
$("#" + $("#" + fcode + "1 input[name='zwt']").attr("id")+"true").attr('style','display:none');
$("#" + imgid+"false").show();
$("#" + imgid+"true").attr('style','display:none');
}
}
function onclickMemu(ojbid){
var text = $("#" + ojbid + " input").val();
var ob = text.split("+");
var id = ob[0];
var code = ob[1];
var fcode = ob[2];
if(fcode == null || fcode == "null" || fcode == ""){
var imgid = $("#" + code + "1 input[name='zwt']").attr("id");
if($("#" + imgid).prop("checked")){
$("#" + code + "1 input[name='zwt']").prop("checked",false);
$("." + code + "2 input[name='zwt']").prop("checked",false);
$("." + code + "2 input[name='zwt']").each(function() {
var currentEle123 = $(this);
var text123 = currentEle123.val();
var ob123 = text123.split("+");
var id123 = ob123[0];
var code123 = ob123[1];
var fcode123 = ob123[2];
$("#" + id123+"false").show();
$("#" + id123+"true").attr('style','display:none');
});
$("#" + imgid+"false").show();
$("#" + imgid+"true").attr('style','display:none');
}else{
$("#" + code + "1 input[name='zwt']").prop("checked",true);
$("." + code + "2 input[name='zwt']").prop("checked",true);
$("." + code + "2 input[name='zwt']").each(function() {
var currentEle123 = $(this);
var text123 = currentEle123.val();
var ob123 = text123.split("+");
var id123 = ob123[0];
var code123 = ob123[1];
var fcode123 = ob123[2];
$("#" + id123+"true").show();
$("#" + id123+"false").attr('style','display:none');
});
$("#" + imgid+"true").show();
$("#" + imgid+"false").attr('style','display:none');
}
}
}