首页 > 技术文章 > jquery全选删除

AliceLiu 2017-10-16 11:21 原文

  全选删除是后台管理中经常用到的,自身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-*什么的。

推荐阅读