简单全选及反选

div {
	width:300px;
	/
	*text-align:center;
	*/
	border:solid 1px #000;
	padding:20px 0;
	margin:0 auto;
}
span {
	margin-right:20px;
}
a {
	color:green;
}

//给标签增加类名  div.className = '';
//给所有的输入框都增加checked属性
//	var inps = document.querySelectorAll('input');
//	for( var i =0; i< inps.length; i++){
//		if( i % 2 == 0 ){
//			inps[i].checked = true;
//		}
//	}
//效果：当点击全选按钮的时候，所有的选项都被选中
//span内容变成全不选
//span有两种内容，全选， 全不选  是根据全选按钮是否被选中而定

//效果：当点击反选按钮的时候，所有的选项取反值

//效果：当10个选项都被选中即(十个checked都为true)的时候，
//全选被选中
var inpFirst = document.querySelector('input');
var inps = document.querySelectorAll('input');
var span = document.querySelector('span');
var fan = document.querySelector('a');
//全选
inpFirst.onclick = function() {
    //      	this.checked = true;
    for (var i = 1; i < inps.length; i++) {
        inps[i].checked = this.checked;
    }
    //			if(this.checked) {
    //				span.innerText = '全不选';
    //			} else {
    //				span.innerText = '全选';
    //			}
    checkAll();
}

//十个选项
//设置初始被选中的次数
for (var i = 1; i < inps.length; i++) {
    inps[i].onclick = function() {
        //检测选项中被选中的个数
        //				for(var j = 1, num = 0; j < inps.length; j++) {
        //					if(inps[j].checked) {
        //						num++;
        //					}
        //					//      			console.log(num);
        //				}
        //				inpFirst.checked = (inps.length - 1 == num);
        //				if(inpFirst.checked) {
        //					span.innerText = '全不选';
        //				} else {
        //					span.innerText = '全选';
        //				}
        checkAll();
    }
}
//反选
fan.onclick = function() {
    for (var i = 1; i < inps.length; i++) {
        inps[i].checked = !inps[i].checked;

}
    checkAll();
}
//封装
function checkAll() {
    for (var j = 1, num = 0; j < inps.length; j++) {
        if (inps[j].checked) {
            num++;
        }
        //      			console.log(num);
    }
    inpFirst.checked = (inps.length - 1 == num);
    if (inpFirst.checked) {
        span.innerText = '全不选';
    } else {
        span.innerText = '全选';
    }
}

checkAll();

PROMULGATOR

北辰い【邀月】

相关代码

简单全选及反选

最新