分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

jquery全选删除

发布时间:2023-09-06 01:18责任编辑:苏小强关键词:暂无标签

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

jquery全选删除

原文地址:http://www.cnblogs.com/AliceLiu/p/7676138.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved