1. 程式人生 > >JS 控制checkbox 獲取 全選 全不選 一行不選擇全選則不被選擇 所有選擇全選被選擇

JS 控制checkbox 獲取 全選 全不選 一行不選擇全選則不被選擇 所有選擇全選被選擇

element selectall -- 頁面 put all for elements 監聽

//點擊全選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 獲取 全選 全不選 一行不選擇全選則不被選擇 所有選擇全選被選擇