js实现全选、取消全选、反选

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_38188047/article/details/100528198

html

    	看书：<input type="checkbox" name="checkbox" value=1><br>
		写字：<input type="checkbox" name="checkbox"value=2><br>
		打飞机：<input type="checkbox" name="checkbox"value=3><br>
		玩游戏：<input type="checkbox" name="checkbox"value=4><br>
		<button onclick="checkboxed(true)">全选</button>
		<button onclick="uncheckboxed(false)">取消全选</button>
		<button onclick="allcheck()">全选/取消全选</button>
		<button onclick="invertOpt()">反选</button>

js

var objNameList=document.getElementsByName("checkbox");
			//赋值
			function setChecked(opt){
				for (var i=0;i<objNameList.length;i++) {
					objNameList[i].checked = opt;
				}
			}
			//全选
			function checkboxed(opt){
				setChecked(opt)
			}
			//取消全选
			function uncheckboxed(opt){
				setChecked(opt)
			}
			
			//全选与取消全选
			var flag = false;
			function allcheck(){
				var count = 0;
				flag = !flag;
				//若为4则全部被选
				for (var i=0;i<objNameList.length;i++) {
					if(objNameList[i].checked){
						count++; //
					}
				}
				if(count==objNameList.length){//全部被选
					setChecked(false);
				}else if(count==0){//全部不被选
					setChecked(true);
				}else{//其他可能
					setChecked(flag);
				}
			}
			
			//反选
			function invertOpt(){
				for (var i=0;i<objNameList.length;i++) {
					if(objNameList[i].checked){
						objNameList[i].checked = false;
					}else{
						objNameList[i].checked = true;
					}
				}
			}