zoukankan      html  css  js  c++  java
  • jquery全选删除

      全选删除是后台管理中经常用到的,自身js水平弱,所以记下来,方便以后使用。

      

    html代码:

    <table>
                <thead>
                <tr>
                    <td><input class="selectAll" type="checkbox"></td>
                    <td>ID</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                </tr>
                </thead>
                <tbody id="content">
            <tr>
                    <td><input name="check" type="checkbox"></td>
                    <td>123</td>
                    <td>zhangsan</td>
                    <td>24</td>
                    <td>boy</td>
                </tr>
            ```
                </tbody>
    </table> 
    <button class="deleteAll">删除全部</button>

    js代码:

    $('.selectAll').on('click', function () {
            if(this.checked) {
                $('table input[name="check"]').prop('checked',true).val('1');
            } else {
                $('table input[name="check"]').prop('checked',false).val('0');
            }
        });
     $('.deleteAll').on('click',function () {
            if(confirm('确定删除这些数据吗?')){
                var checks = $('table input[name="check"]:checked');
                if(checks.length == 0) {
                    alert('未选中任何数据!');
                    return false;
                }
                $('table tbody').find(':checkbox[value=1]').parents('tr').remove();
                $('.selectAll').prop('checked', false); } })  // 这里把全选框重置为未选状态

    这里是通过给选中的checkbox添加value的方式,然后删除带有这个值的元素。当然也可以添加其他属性,比如data-*什么的。

  • 相关阅读:
    Git修改用户名和提交的邮箱
    在vue项目中引入bootstrap
    自定义radio,使用图片进行切换(点击切换时,获取变量值)
    nodejs知识清单
    swoft源码研究
    Nginx变量查询
    mongodb索引
    mongodb数据备份:导入导出
    mongodb主从复制和分片
    mongodb服务安装
  • 原文地址:https://www.cnblogs.com/AliceLiu/p/7676138.html
Copyright © 2011-2022 走看看