zoukankan      html  css  js  c++  java
  • js 全选选框与取消全选代码

    设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消。全选后点击某个子选框,全选也能取消。当四个子选框都选中时,全选框也被选择。

    实现代码:

    <script>
    	var a=document.getElementById("a");
    	var b=document.getElementsByClassName("b");
    //全选与取消全选
    	var y=true;
    	a.onchange=function(){
    		
    		if(a.checked){
    			for (var i=0;i<b.length;i++) 		
    				b[i].checked = true;
    		}else{
    			for (var i=0;i<b.length;i++) {
    				   b[i].checked =false;
    			
    			};
    		};
    		
    	};
    //子选框选择判定全选选框(第一种实现方法) for (var i=0;i<b.length;i++) { b[i].onchange=function(){ a.checked = true; for (var i=0;i<b.length;i++) { if (!b[i].checked) { a.checked=false; break; } } } } //子选框选择判定全选(第二种实现方法) // var n = 0; // for (var i=0;i<b.length;i++) { // b[i].onchange=function(){ // n = 0; // for(var i = 0; i < b.length; i++) // { // if(b[i].checked==true){ // n++; // } // if(n>=4){ // alert(n); // a.checked = true; // } else{ // a.checked = false; // } // // } // } //}

      

  • 相关阅读:
    google
    学习Linux第六天
    对比教学大纲
    周 记
    《世界是数字的》读后感
    《我是一只IT小小鸟》读后感
    前端小知识
    JavaScript 执行机制
    执行栈和任务队列
    支付宝前端员工培训手册
  • 原文地址:https://www.cnblogs.com/dej-11/p/7497194.html
Copyright © 2011-2022 走看看