table中checkbox选择多行


页面代码

 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 });

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM