table中checkbox選擇多行
阿新 • • 發佈:2018-11-11
頁面程式碼
1 <table id="addressTable" class="ui-jqgrid-htable ui-common-table table table-bordered">
2 <thead>
3 <tr>
4 <td style='text-align:center;width:35px;'><input id="selectAll" role='checkbox' type='checkbox' class='cbox checkbox' /></ td>
5 <td>名稱</td><td>地址</td><td>聯絡人</td><td>電話</td><td>操作</td>
6 </tr>
7 </thead>
8 <tbody id="tbody">
9 <tr>
10 <td style="text-align:center;width:35px;">
11 < input role="checkbox" type="checkbox" class="cbox checkbox">
12 </td>
13 <td>明十三陵</td><td>北京市市轄區昌平區天壽山麓</td><td>崇禎</td><td>18903378092</td>
14 <td><a onclick="updateItem(this)">修改</a><a onclick="deleteItem(this)" >刪除</a></td>
15 </tr>
16 <tr>
17 <td style="text-align:center;width:35px;">
18 <input role="checkbox" type="checkbox" class="cbox checkbox">
19 </td>
20 <td>1多福多壽</td><td>福建省龍巖市連城縣八王墳</td><td>2</td><td>18903378092</td>
21 <td><a onclick="updateItem(this)">修改</a> <a onclick="deleteItem(this)">刪除</a></td>
22 </tr>
23 </tbody>
24 </table>
js程式碼
1 $(function() {
2 $("#selectAll").change(function() {
3 var checkboxs = $("#tbody").find("input[type='checkbox']");
4 var isChecked = $(this).is(":checked");
5 //嚴禁使用foreach,jq物件的遍歷會使瀏覽器崩潰
6 for(var i = 0; i < checkboxs.length; i++) {
7 //臨時變數,必須,否則只能選中最後一條記錄
8 var temp = i;
9 $(checkboxs[temp]).prop("checked",isChecked);
10 }
11 });
12 });