js实现全选、全不选、反选、选中的值、必选中一个

直接上代码

1.html代码

  <input type="Checkbox" onclick="checkAll(this)" id="all" />全选
  <input type="Checkbox" onclick="checkAllNo()" id="allno" />全不选
  <input type="Checkbox" onclick="reverseSel()" id="reall" />反选
  <input type="Checkbox" onclick="selValue()" id="selv" />选中的值
  <input type="Checkbox" onclick="mustSel()" id="selm" />必选中一个<br/>
    
  <input type="Checkbox" name="box" onclick="selectAll()" value="10010" />疾风剑豪<br/>
  <input type="Checkbox" name="box" onclick="selectAll()" value="10011" />刀锋意志<br/>
  <input type="Checkbox" name="box" onclick="selectAll()" value="10012" />迅捷斥候<br/>
  <input type="Checkbox" name="box" onclick="selectAll()" value="10013" />崔丝塔娜<br/>
  <input type="Checkbox" name="box" onclick="selectAll()" value="10014" />德玛西亚皇子<br/>
  <input type="Checkbox" name="box" onclick="selectAll()" value="10015" />李青<br/>

2.js

//全选
		function checkAll(obj) {
			//获取name=box的复选框
			var boxs = document.getElementsByName("box");
			for(var i = 0; i < boxs.length; i++) {
				boxs[i].checked = obj.checked;
			}
		}
		//全不选
        function checkAllNo(){
        	var boxs = document.getElementsByName("box");                            
            for(var i=0;i<boxs.length;i++){
                boxs[i].checked=false;
            }
//          selectAll();
        }
        //如果有未选的，去掉全选
		function selectAll() {
			//获取name=box的复选框
			var boxs = document.getElementsByName("box");
			var count = 0;
			//遍历所有的复选框
			for(var i = 0; i < boxs.length; i++) {
				if(boxs[i].checked) {
					count++;
				}
			}
			//选中复选框的个数==获取复选框的个数 
			if(count == boxs.length) {
				//设置id为all复选框选中
				document.getElementById("all").checked = true;
			} else {
				//设置id为all复选框不选中
				document.getElementById("all").checked = false;
			}
		}
		//反选
		function reverseSel(){
			var boxs = document.getElementsByName("box");
			for(var i = 0; i < boxs.length; i++) {
				var value1 = boxs[i];
				if(value1.checked){
					value1.checked = false;
				}else{
					value1.checked = true;
				}
			}
//			selectAll();
		}
		//获取选中的值
	    function selValue(){
	    	var valArr = [];
	    	var boxs = document.getElementsByName("box");
	    	for(var i = 0; i < boxs.length; i++) {
				if(boxs[i].checked == true){
					valArr[i] = boxs[i].value;
				}
			}
	    	var vals = valArr.join(',');
	    	alert(vals)
	    }
	    //至少选中一个
	    function mustSel(){
	    	var boxs = document.getElementsByName("box");                
                var flag = false ;                
                for(var i=0;i<boxs.length;i++){
                    if(boxs[i].checked){
                        flag = true ;
                        break ;
                    }
                }
                if(!flag){
                    alert("请最少选择一项！");
                    document.getElementById('selm').checked = false;
                    return false ;
                }
	    }