JQuery複選框全選效果如何實現
阿新 • • 發佈:2020-05-10
Js相關技術
checked屬性
如何獲取所有複選框:document.getElementsByName、
需求分析
在我們對錶格處理的時,有些情況下,我們需要對錶格進行批量處理
技術分析
第一種方法:選擇器[屬性名稱='屬性值']
$("input[type='checkbox']:gt(0)").prop("checked",this.checked);
第二種方法:使用層級選擇器來實現 tbody > tr > td > input
$("tbody > tr > td > input").prop("checked",this.checked);
第三種方法:
// #tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]
程式碼實現
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <script> /* 表格全選和全不選 進一步確定事件: 點選事件 */ $(function(){ //繫結點選事件 //this 代表的是當前函式的所有者 $("#checkAll").click(function(){ //獲取當前選中狀態 // alert(this.checked); //獲取所有分類項的checkbox // 選擇器[屬性名稱='屬性值'] // $("input[type='checkbox']:gt(0)").prop("checked",this.checked); //使用層級選擇器來實現 tbody > tr > td > input // $("tbody > tr > td > input").prop("checked",this.checked); //這個可行 // #tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"] $("input").prop("checked",this.checked); }); }); </script> </head> <body> <table border="1px" width="600px" id="tab"> <thead> <tr > <td> <input type="checkbox" id="checkAll" /> </td> <td>分類ID</td> <td>分類名稱</td> <td>分類商品</td> <td>分類描述</td> <td>操作</td> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" /> </td> <td>1</td> <td>手機數碼</td> <td>華為,小米,尼康</td> <td>黑馬數碼產品質量最好</td> <td> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刪除</a> </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>2</td> <td>成人用品</td> <td>充氣的</td> <td>這裡面的充氣電動矽膠的</td> <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刪除</a></td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>3</td> <td>電腦辦公</td> <td>聯想,小米</td> <td>筆記本特賣</td> <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刪除</a></td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>4</td> <td>饞嘴零食</td> <td>辣條,麻花,黃瓜</td> <td>年貨</td> <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刪除</a></td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>5</td> <td>床上用品</td> <td>床單,被套,四件套</td> <td>都是套子</td> <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刪除</a></td> </tr> </tbody> </table> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。