zoukankan      html  css  js  c++  java
  • 全选反选的小案例

    电商网站中当选中一个总按钮那么其他分按钮衣会被选中,而同理当每一个分按钮被选中的时候总按钮也能反过来被选中,这个小功能在购物车里很常见

    HTML代码如下:

    <body>
    	<label for="all">全选</label><input type="checkbox" id="all">
    	<div id="check">
    		<input type="checkbox">
    		<input type="checkbox">
    		<input type="checkbox">
    		<input type="checkbox">
    		<input type="checkbox">
    		<input type="checkbox">
    	</div>
    </body>
    </html>
    

      JS代码及注释

    var all = document.getElementById("all");
    var input = document.getElementById("check").getElementsByTagName("input");
    //全选按钮点击事件 当全选按钮被选中的时候遍历每一个input按钮让他们都被选中
    //否则让他们都不选中
    all.onclick = function() {
    	if(all.checked){
    		for(var i=0;i<input.length;i++){
    			input[i].checked = true;
    		}
    	}else{
    		for(var i=0;i<input.length;i++){
    			input[i].checked = false;
    		}
    	}
    }
    
    
    
    for(var i=0;i<input.length;i++){
    	//给每一个小按钮添加事件
    	input[i].onclick = function(){ 
     //无序按下其中一个按钮这个事件后遍历每一个按钮如果其他的按钮都被勾选那么这时全选框状态也为勾选;否则不勾选
    		var bStop = true;
    //遍历每一个小按钮的状态  如果这个按钮的状态为false的话  就证明有一个没有被选中    
    		for(var j=0;j<input.length;j++){  
    			if(!input[j].checked){    //遍历之后如果某个按钮没被选中说明为false,取反然后为true然后让bstop为false
    				console.log(1)
    				bStop = false;
    				break;       //跳出循环然后执行循环后面的代码
    			}
    		}
    
    		if(bStop){  //这里是所有的按钮都为true的时候bstop为true说明所有按钮都被选中了
    			all.checked = true;
    		}else{
    			all.checked = false;  //这里是存在没有勾选的按钮那么bstop为false执行的代码
    		}
    	}
    }
    

      

  • 相关阅读:
    git常用指令 github版本回退 reset
    三门问题 概率论
    如何高效的学习高等数学
    数据库6 关系代数(relational algebra) 函数依赖(functional dependency)
    数据库5 索引 动态哈希(Dynamic Hashing)
    数据库4 3层结构(Three Level Architecture) DBA DML DDL DCL DQL
    梦想开始的地方
    java String字符串转对象实体类
    java 生成图片验证码
    java 对象之间相同属性进行赋值
  • 原文地址:https://www.cnblogs.com/MikePan/p/9135510.html
Copyright © 2011-2022 走看看