html如何设置正反选,正反选.html·xuweilong0/weatherGitee.com

.alls{

width: 100px;

border: 1px solid;

margin: auto;

font-size: 14px;;

}

.docuble{

border-bottom: 1px solid;

}

.items{

display: flex;

flex-direction: column;

}

var truue &＃61; document.querySelector(&＃39;.docuble #all&＃39;);

var checkboxs &＃61; document.querySelectorAll(&＃39;.items input&＃39;);

var inverse &＃61; document.querySelector(&＃39;.inverse&＃39;);

var label &＃61; document.querySelector(&＃39;.docuble label&＃39;);

truue.onclick &＃61; function(){

for(var i &＃61; 0; i

checkboxs[i].checked &＃61; this.checked;

}

istruue();

}

inverse.onclick &＃61; function(){

for(var i &＃61; 0; i

checkboxs[i].checked &＃61; !checkboxs[i].checked;

}

istruue();

}

for(var i &＃61; 0; i

checkboxs[i].onclick &＃61; function () {

istruue();

}

}

function istruue(){

var count &＃61; 0;

for(var i &＃61; 0; i

checkboxs[i].checked && count&＃43;&＃43;;

}

console.log(&＃39;count&＃61;&＃39;&＃43;count,count&＃61;&＃61;checkboxs.length);

label.innerHTML &＃61; count&＃61;&＃61;checkboxs.length ? &＃39;全不选&＃39; : &＃39;全选&＃39;;

truue.checked &＃61; count&＃61;&＃61;checkboxs.length;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史