JavaScript复选框实现全选、全不选、反选、提交

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>全选</title>
    <style>
        .container {
        margin:0px auto;
        width:500px;
        }
    </style>
    <script>
      window.onload=function(){
      	//获取所有的复选框
      	var items=document.getElementsByName("items");
      	//全选/反选
      	//onchange事件：当元素的值发生改变时 进行触发
      	document.getElementById("all").onchange=function(){
      		for(var i=0;i<items.length;i++){
      			//items[i].checked=this.checked;
      			//items[i].setAttribute("checked",this.checked);
      			items[i].checked=!items[i].checked;//取反
      		}
      	}
      	//全选 为按钮添加点击事件
      	document.getElementById("checkedAll").onclick=function(){
      		for(var i=0;i<items.length;i++){
      			//选中
      			items[i].checked=true;
      		}
      	}
      	//全不选
      	document.getElementById("checkedNo").onclick=function(){
      		for(var i=0;i<items.length;i++){
      			//选中
      			items[i].checked=false;
      		}
      	}
      	
      	//反选
      	document.getElementById("checkRev").onclick=function(){
      		for(var i=0;i<items.length;i++){
      			items[i].checked=!items[i].checked;//取反
      		}
      	
      	}
      		//提交
      		document.getElementById("submit").onclick=function(){
      		var result="";
      		for(var i=0;i<items.length;i++){      			
      		if(items[i].checked){
      			result+=items[i].value+"\n";
      			
      			}
      		}
      		alert(result);
      		}
      }
      
    </script>
</head>
<body>
    <form action="/" method="post">
        <div class="container">
            <label>你爱好的运动是？</label><input type="checkbox" name="name"  id="all" />全选/反选
            <p>
                <input type="checkbox" name="items" value="足球" />足球
                <input type="checkbox" name="items" value="篮球" />篮球
                <input type="checkbox" name="items" value="排球" />排球
                <input type="checkbox" name="items" value="台球" />台球
            </p>
            <p>
                <input type="button" id="checkedAll"  value="全选"/>
                <input type="button" id="checkedNo" value="全不选" />
                <input type="button" id="checkRev" value="反选" />
                <input type="button" id="submit" value="提交" />
            </p>
        </div>
    </form>
</body>
</html>
JavaScript复选框实现全选、全不选、反选、提交

猜你喜欢
