100. 全选练习

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>全选练习</title>
<script type=”text/javascript”>

    window.onload = function(){
        
        
         //获取四个多选框items
         var items = document.getElementsByName(“items”);
         //获取全选/全不选的多选框
         var checkedAllBox = document.getElementById(“checkedAllBox”);
        
         /*
          * 全选按钮
          *     – 点击按钮以后,四个多选框全都被选中
          */
        
         //1.#checkedAllBtn
         //为id为checkedAllBtn的按钮绑定一个单击响应函数
         var checkedAllBtn = document.getElementById(“checkedAllBtn”);
         checkedAllBtn.onclick = function(){
            
            
             //遍历items
             for(var i=0 ; i<items.length ; i++){
                
                 //通过多选框的checked属性可以来获取或设置多选框的选中状态
                 //alert(items[i].checked);
                
                 //设置四个多选框变成选中状态
                 items[i].checked = true;
             }
            
             //将全选/全不选设置为选中
             checkedAllBox.checked = true;
            
            
         };
        
         /*
          * 全不选按钮
          *     – 点击按钮以后,四个多选框都变成没选中的状态
          */
         //2.#checkedNoBtn
         //为id为checkedNoBtn的按钮绑定一个单击响应函数
         var checkedNoBtn = document.getElementById(“checkedNoBtn”);
         checkedNoBtn.onclick = function(){
            
             for(var i=0; i<items.length ; i++){
                 //将四个多选框设置为没选中的状态
                 items[i].checked = false;
             }
            
             //将全选/全不选设置为不选中
             checkedAllBox.checked = false;
            
         };
        
         /*
          * 反选按钮
          *     – 点击按钮以后,选中的变成没选中,没选中的变成选中
          */
         //3.#checkedRevBtn
         var checkedRevBtn = document.getElementById(“checkedRevBtn”);
         checkedRevBtn.onclick = function(){
            
             //将checkedAllBox设置为选中状态
             checkedAllBox.checked = true;
            
             for(var i=0; i<items.length ; i++){
                
                 //判断多选框状态
                 /*if(items[i].checked){
                     //证明多选框已选中,则设置为没选中状态
                     items[i].checked = false;
                 }else{
                     //证明多选框没选中,则设置为选中状态
                     items[i].checked = true;
                 }*/
                
                 items[i].checked = !items[i].checked;
                
                 //判断四个多选框是否全选
                 //只要有一个没选中则就不是全选
                 if(!items[i].checked){
                     //一旦进入判断,则证明不是全选状态
                     //将checkedAllBox设置为没选中状态
                     checkedAllBox.checked = false;
                 }
             }
            
             //在反选时也需要判断四个多选框是否全都选中
            
            
            
         };
        
         /*
          * 提交按钮:
          *     – 点击按钮以后,将所有选中的多选框的value属性值弹出
          */
         //4.#sendBtn
         //为sendBtn绑定单击响应函数
         var sendBtn = document.getElementById(“sendBtn”);
         sendBtn.onclick = function(){
             //遍历items
             for(var i=0 ; i<items.length ; i++){
                 //判断多选框是否选中
                 if(items[i].checked){
                     alert(items[i].value);
                 }
             }
         };
        
        
         //5.#checkedAllBox
         /*
          * 全选/全不选 多选框
          *     – 当它选中时,其余的也选中,当它取消时其余的也取消
          *
          * 在事件的响应函数中,响应函数是给谁绑定的this就是谁
          */
         //为checkedAllBox绑定单击响应函数
         checkedAllBox.onclick = function(){
            
             //alert(this === checkedAllBox);
            
             //设置多选框的选中状态
             for(var i=0; i <items.length ; i++){
                 items[i].checked = this.checked;
             }
            
         };
        
         //6.items
         /*
          * 如果四个多选框全都选中,则checkedAllBox也应该选中
          * 如果四个多选框没都选中,则checkedAllBox也不应该选中
          */
        
         //为四个多选框分别绑定点击响应函数
         for(var i=0 ; i<items.length ; i++){
             items[i].onclick = function(){
                
                 //将checkedAllBox设置为选中状态
                 checkedAllBox.checked = true;
                
                 for(var j=0 ; j<items.length ; j++){
                     //判断四个多选框是否全选
                     //只要有一个没选中则就不是全选
                     if(!items[j].checked){
                         //一旦进入判断,则证明不是全选状态
                         //将checkedAllBox设置为没选中状态
                         checkedAllBox.checked = false;
                         //一旦进入判断,则已经得出结果,不用再继续执行循环
                         break;
                     }
                    
                 }
                
                
                
             };
         }
        
        
     };
    
</script>
</head>
<body>

    <form method=”post” action=””>
         你爱好的运动是?<input type=”checkbox” id=”checkedAllBox” />全选/全不选
        
         <br />
         <input type=”checkbox” name=”items” value=”足球” />足球
         <input type=”checkbox” name=”items” value=”篮球” />篮球
         <input type=”checkbox” name=”items” value=”羽毛球” />羽毛球
         <input type=”checkbox” name=”items” value=”乒乓球” />乒乓球
         <br />
         <input type=”button” id=”checkedAllBtn” value=”全 选” />
         <input type=”button” id=”checkedNoBtn” value=”全不选” />
         <input type=”button” id=”checkedRevBtn” value=”反 选” />
         <input type=”button” id=”sendBtn” value=”提 交” />
     </form>
</body>
</html>

打赏

发布者

张 大鹏

北京理想国惠玩科技有限公司CEO

发表评论

电子邮件地址不会被公开。 必填项已用*标注