码迷,mamicode.com
首页 > Web开发 > 详细

JS 控制checkbox 获取 全选 全不选 一行不选择全选则不被选择 所有选择全选被选择

时间:2017-05-28 14:24:41      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:mod   on()   select   ==   data-   pos   处理程序   font   java   

//点击全选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;
			}
		}
    });






   

JS 控制checkbox 获取 全选 全不选 一行不选择全选则不被选择 所有选择全选被选择

标签:mod   on()   select   ==   data-   pos   处理程序   font   java   

原文地址:http://www.cnblogs.com/jzssuanfa/p/6915596.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!