JS 控制checkbox 獲取 全選 全不選 一行不選擇全選則不被選擇 所有選擇全選被選擇
阿新 • • 發佈:2017-05-28
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 獲取 全選 全不選 一行不選擇全選則不被選擇 所有選擇全選被選擇