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;
    			}
    		}
        });





    
       
    
  • 相关阅读:
    《ML in Action》笔记(2) —— ID3决策树
    《ML in Action》笔记(1) —— kNN分类器
    MYSQL笔记
    Javascript代码摘录
    初试mysql存储过程&触发器
    百度地图API应用实践(一) —— 栅格图(草稿)
    2020年8月9日, 网吧, 歌单, 极客时间, 龙岩网络图书馆, 正则, WPS, Python
    2020年8月3日, 网吧 ,
    2020年7月13日,想在网吧搞学习,实属想多了
    账号被盗,什么原因呢?是我的操作系统太脆弱,还是博客园存在安全隐患?
  • 原文地址:https://www.cnblogs.com/jzssuanfa/p/6915596.html
Copyright © 2011-2022 走看看