?當點擊全選按鈕 下面的checkbox都被選上 通過js控制 給元素添加事件

<div style="position: relative;top: 10px;"><table class="table table-hover"><thead><tr style="color: #B3B3B3;"><td><input type="checkbox" id="checkAll"/></td><td>名稱</td><td>所有者</td><td>開始日期</td><td>結束日期</td></tr></thead><tbody id="tBody"> </tbody></table><div id="demo_pag1"></div></div>

給全選按鈕添加單擊事件 （如果全選按鈕是選中狀態 則列表中所有checkbox都選中）

? ? ? ? ?if（this.checked==true){

? ? ? ? ? ? ? ? $("#tBody input[type='checkbox']").prop("checked",true);

? ? ? ? ?else{

? ? ? ? ? ? ? ?? ? ? $("#tBody input[type='checkbox']").prop("checked",false);

? ? ? ? }

$("#checkAll").click(function(){//如果“全選按鈕是選中狀態，則列表中所有checkbox都選中$("tBody input[type='checkbox']").prop("checked",this.checked);});

當點擊checkbox按鈕，給checkbox添加單擊事件

$("#tBody input[type='checkbox']").click(function(){//列表中checkbox都選中 則全選都選中if( $("#tBodyinput[type='checkbox']").size()==$("#tBodyinput[type='checkbox']:checked").size()){$("#checkAll").prop("checked",true);}else{$("#checkAll").prop("checked",false);} });

選擇器.click(function(){
? ? ? ? ? ? ? ? ? ? ? ? //js代

?});? ? ? ? 只能給固有元素添加事件（當調用事件函數給元素添加事件時，如果元素已經生成）

?應為tBody中的input 標簽tr 是動態生成 （js代碼失效）元素未加載完

$("#tBody").on("click","input[type='checkbox']",function (){if( $("#tBody input[type='checkbox']").size() ==$("#tBody input[type='checkbox']:checked").size()){$("#checkAll").prop("checked",true);}else{$("#checkAll").prop("checked",false);}});

父選擇器.on("事件類型",子選擇器,function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //js代碼
});? ? ? ? ???父元素:必須是固有元素? ? ??事件類型：跟事件屬性和事件函數一一對應。

? ? ? ? ? ? ? ? 子選擇器：目標元素,跟父選擇器構成一個父子選擇器

? ? ?不但能給固有元素添加事件，還能夠給動態生成的元素添加事件

解決點擊翻頁功能后 列表重新更新后 取消全選按鈕?

? ? ? ? ? 拼接完列表之后 全選取消

? ? ?$("#checkAll").prop("checked",false); //點擊翻頁功能 會重新跟新列表 checkbox沒選上

1,在頁面中給元素添加事件語法：
? a.使用元素的事件屬性：onxxxx="f()"
? b.使用jquery對象：選擇器.xxxx(function(){
? ? ? ? ? ? ? ? ? ? ? ? //js代碼
? ? ? ? ? ? ? ? ? ? ? ?//this
? ? ? ? ? ? ? ? ? ? });
?? ??? ? ? ?*只能給固有元素添加事件
?? ??? ? ? ? 固有元素：當調用事件函數給元素添加事件時，如果元素已經生成，則這些元素叫做固有元素；
?? ??? ? ? ? 動態生成的元素：當調用事件函數給元素添加事件時，如果元素還沒有生成，后來生成的元素叫做動態生成的元素。
? c.使用jquery的on函數：父選擇器.on("事件類型",子選擇器,function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //js代碼
? ? ? ? ? ? ? ? ? ? ? ?//this
? ? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? ? 父元素:必須是固有元素,可以直接父元素,也可以是間接父元素.
?? ??? ??? ? ? ? ? 原則固有父元素范圍越小越好.
?? ??? ??? ?事件類型：跟事件屬性和事件函數一一對應。
?? ??? ??? ?子選擇器：目標元素,跟父選擇器構成一個父子選擇器
?? ??? ??? ?*不但能給固有元素添加事件，還能夠給動態生成的元素添加事件。

? ? ? ??

總結

以上是生活随笔為你收集整理的全选和取消全选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。