jquery全选删除

Posted 2020-10-10 背对太阳的向日葵

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