复选框联动效果以及全选非全选，反选

<div class="mui-checkbox_inp">
  <ul>


<li class="lin"><span>A站点</span><div><input name="subBox" type="checkbox" class="inp" id="inp" value="101" /></div></li>
<li class="lin"><span>B站点</span><div><input name="subBox" type="checkbox" class="inp" value="102" /></div></li>
<li class="lin"><span>C站点</span><div><input name="subBox" type="checkbox" class="inp" value="103" /></div></li>


  </ul>

</div>

js代码

var arr = document.querySelectorAll('input[type="checkbox"]');
document.querySelector('.mui-switch-mini').addEventListener('toggle', function(event) {


console.log(event.detail.isActive);
if(event.detail.isActive) {
//此段代码控制样式
// for(var i = 0; i < arr.length; i++) {
// arr[i].checked = true;
// }
//此段代码修改值,用于之后判断选中的checkbox
$(".mui-checkbox_inp input").each(function() {
$(this).attr("checked", true);
});


} else {
// for(var i = 0; i < arr.length; i++) {
// arr[i].checked = false;
// }
$(".mui-checkbox_inp input").each(function() {
$(this).attr("checked", false);
});


}
});


var allLength = $("input").length; //所有的checkbox的长度

$("input").each(function() {

$(".lin").bind('click', function() {
           console.log($(this).find('input').attr("checked"))


   if( $(this).find('input').attr("checked") == false || $(this).find('input').attr("checked") == undefined){
    console.log(12);
    $(this).find('input').attr("checked",true);
   }else{ 
   
    $(this).find('input').attr("checked",false);
   }  
                         

var selectedLength = $("input:checked").length; //所有的选中的checkbox的长度
if(selectedLength == allLength) {
$('.mui-switch-mini').addClass("mui-active"); //全选按钮
} else {
$('.mui-switch-mini').removeClass("mui-active");
}


}) 


})