zoukankan      html  css  js  c++  java
  • 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;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;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;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 });
  • 相关阅读:
    WPF中的句柄
    WPF中的焦点问题
    Vue项目(一):VSCode环境开发Vue程序以及其中遇到的问题
    C#实现三种方式的模拟按键
    c++温故之结构体写法
    WPF搜索框
    vue框架学习
    Git连接失败问题解决方案
    单击双击冲突解决 小程序
    uniapp 微信小程序 wx.createAnimation 实现向上滚动弹幕
  • 原文地址:https://www.cnblogs.com/guanghe/p/9804833.html
Copyright © 2011-2022 走看看