HTML页面checkbox的全选反选全不选-基于jquery
2020-01-14 05:31
302 查看
直接上代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="./jquery-3.3.1.min.js" ></script> </head> <body> <script> $(function() { $("#selectAll").click(function() { $(":checkbox[name='ids']").prop("checked", this.checked); // this指代的你当前选择的这个元素的JS对象 }); }); $(function() { $("#selectRef").click(function() { $("#selectAll").prop("checked", false); $(":checkbox[name='ids']").each(function () { $(this).prop("checked",!this["checked"]); }); }); }); </script> </head> <body> <table id="tab1" border="1" width="80%" align="center"> <thead> <tr> <th><input type="checkbox" id="selectAll" />全选全不选<input type="button" id="selectRef" value="反选"/></th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="ids" /></td> </tr> <tr> <td><input type="checkbox" name="ids" /></td> </tr> <tr> <td><input type="checkbox" name="ids" /></td> </tr> <tr> <td><input type="checkbox" name="ids" /></td> </tr> <tr> <td><input type="checkbox" name="ids" /></td> </tr> </tbody> </table> </body> </body> </html>
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- jquery checkbox全选,全不选,反选方法,jquery checkbox全选只能操作一次
- 遇到的一个html控件checkbox全选反选问题后台取值问题
- checkbox 全选/反选功能的 jquery插件(支持多页保持选择)
- 1、checkbox日常jquery操作。 现在我们以下面的html为例进行checkbox的操作。 <input id="checkAll" type="checkbox" />全选
- jquery checkbox全选反选效果代码
- 基于JQuery实现CheckBox全选全不选
- Jquery CheckBox全选方法代码附js checkbox全选反选代码
- JQuery如何获取table中checkBox选中的多行的值并传到另一个html页面中
- JQuery checkbox全选,反选实例
- jQuery实现checkbox列表的全选、反选功能
- 基于jQuery实现复选框的全选 全不选 反选功能
- 基于webpack实现多html页面开发框架七 引入第三方库如jquery
- JQUERY CHECKBOX全选,取消全选,反选方法三
- 国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架
- Jquery CheckBox全选方法代码附js checkbox全选反选代码
- jquery checkbox全选反选效果代码
- 3分钟写出来的Jquery版checkbox全选反选功能
- 3分钟写出来的Jquery版checkbox全选反选功能
- 【jQuery】jQuery实现checkbox的全选/反选逻辑
- jQuery实现checkbox的全选反选方法