zoukankan      html  css  js  c++  java
  • JS 控制checkbox 获取 全选 全不选 一行不选择全选则不被选择 所有选择全选被选择

    //点击全选button的事件操作
        function selectAll(){  
           var allcheckBoxs=document.getElementsByName("iTo");  
           var select=document.getElementsByName("select");  
           if(select[0].checked){ //,每个都选择,全选button被选择 
              for(var i=0;i<allcheckBoxs.length;i++){  
                allcheckBoxs[i].checked = true;  
              }  
           }else{  //有一个不选择。全选button则不选择
             for(var i=0;i<allcheckBoxs.length;i++){  
               allcheckBoxs[i].checked = false;  
             }  
           }  
         }
         
         
    $('input[name=sca]').click(function(){
    		var ckslength = $('input[name=sca]').length;
    		if(!$(this)[0].checked){
    			$('#select')[0].checked = false;
    		}else if($(this)[0].checked){
    			if($('input[name=sca]:checked').length == ckslength){
    				$('#select')[0].checked = true;
    			}
    		}
    	});/**反全选*/

    
    
    

    <!--页面上 全选button-->
    <input type='checkbox' id='select' name="select" onclick="selectAll();"/>
    
    <INPUT type="checkbox" name="iTo" onclick='getRowValue(this);'>选择1
    
    <INPUT type="checkbox" name="iTo" onclick='getRowValue(this);'>选择2
    
    <INPUT type="checkbox" name="iTo" onclick='getRowValue(this);'>选择3
    
    <INPUT type="checkbox" name="iTo" onclick='getRowValue(this);'>选择4
    
    <INPUT type="checkbox" name="iTo" onclick='getRowValue(this);'>选择5
    

    当用js追加一行<input  type='checkbox' name='iTo' />选择6时。

    用click函数已经无法监听到该“选择6”。此时应该用

    live函数

       live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时执行的函数。



       通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比方由脚本创建的新元素)。


     $('input[name=iTo]').live("click",function(){
           var ckslength = $('input[name=iTo]').length;
    		if(!$(this)[0].checked){
    			$('#select')[0].checked = false;
    		}else if($(this)[0].checked){
    			if($('input[name=iTo]:checked').length == ckslength){
    				$('#select')[0].checked = true;
    			}
    		}
        });





    
       
    
  • 相关阅读:
    拟阵交
    HEOI2021退役记
    退役划水一
    上下界网络流学习笔记
    扩展卢卡斯学习笔记
    扩展中国剩余定理(EXCRT)学习笔记
    插头DP学习笔记
    如何优雅地生成仙人掌图
    Powerful Number 筛学习笔记
    边分治学习笔记
  • 原文地址:https://www.cnblogs.com/jzssuanfa/p/6915596.html
Copyright © 2011-2022 走看看