html如何设置正反选,正反选.html · xuweilong-0/weather - Gitee.com

Document

.alls{

width: 100px;

border: 1px solid;

margin: auto;

font-size: 14px;;

}

.docuble{

border-bottom: 1px solid;

}

.items{

display: flex;

flex-direction: column;

}

全选

反选

1

2

3

4

5

6

7

8

9

10

var truue = document.querySelector('.docuble #all');

var checkboxs = document.querySelectorAll('.items input');

var inverse = document.querySelector('.inverse');

var label = document.querySelector('.docuble label');

truue.onclick = function(){

for(var i = 0; i < checkboxs.length; i++){

checkboxs[i].checked = this.checked;

}

istruue();

}

inverse.onclick = function(){

for(var i = 0; i < checkboxs.length; i++){

checkboxs[i].checked = !checkboxs[i].checked;

}

istruue();

}

for(var i = 0; i < checkboxs.length; i++){

checkboxs[i].onclick = function () {

istruue();

}

}

function istruue(){

var count = 0;

for(var i = 0; i < checkboxs.length; i++){

checkboxs[i].checked && count++;

}

console.log('count='+count,count==checkboxs.length);

label.innerHTML = count==checkboxs.length ? '全不选' : '全选';

truue.checked = count==checkboxs.length;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史