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

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

时间:2014-07-03 15:54:00      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:checkbox   js   

</pre><pre name="code" class="javascript"><span style="font-size:18px;">//点击全选按钮的事件操作
    function selectAll(){  
       var allcheckBoxs=document.getElementsByName("iTo");  
       var select=document.getElementsByName("select");  
       if(select[0].checked){ //,每一个都选择,全选按钮被选择 
          for(var i=0;i<allcheckBoxs.length;i++){  
            allcheckBoxs[i].checked = true;  
          }  
       }else{  //有一个不选择,全选按钮则不选择
         for(var i=0;i<allcheckBoxs.length;i++){  
           allcheckBoxs[i].checked = false;  
         }  
       }  
     }
     
     
//点击每一行的checkbox触发的事件
  function  getSelectRow(thisObj){
 	   //判断iTo是否选择,不选择 全选按钮不选择
     	if(!$(thisObj).attr("checked")){</span>
			 --lenstr;</span>//被选择的行自减一
     		$("#select").attr("checked",false);
     	}
     	//当所有列复选框都选择,全选按钮选择
     	if($(thisObj).attr("checked")){
     	  var allcheckBoxs=document.getElementsByName("iTo");
     	  ++lenstr;//被选择的行自加一

     	  if(allcheckBoxs.length == lenstr ){ //当行checkbox选择的数量=所有的checkbox的行数
     	 	 $("#select").attr("checked",true);
     	  }
     	}
}


//js定义一个全局变量
//定义全局变量,获取用户点击的列复选框的行数
   var lenstr = $("input[name=iTo].checked").length ; </span>

<span style="font-size:18px;"><!--页面上 全选按钮-->
<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
</span>






JS 控制checkbox 获取 全选 全不选 一行不选择全选则不被选择 全部选择全选被选择,布布扣,bubuko.com

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

标签:checkbox   js   

原文地址:http://blog.csdn.net/lanqibaoer/article/details/36458515

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