1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > jQuery对checkbox 复选框的全选全不选反选的操作

jQuery对checkbox 复选框的全选全不选反选的操作

时间:2019-05-25 14:08:37

相关推荐

jQuery对checkbox 复选框的全选全不选反选的操作

web前端|js教程

jquery checkbox 复选框

web前端-js教程

先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码。

仿微拍视频源码,vscode 怎么用户设置,ubuntu文件对比,tomcat什么语言,树莓派sqlite怎么用,卧室地面很小的爬虫叫什么,php 支付宝接口文档,山西淘宝seo优化,dede 网站打开慢,asp 网页跳转域名,企业官网模板百度云lzw

asp源码 无限极分类,pfb格式字体vscode,ubuntu的snap,tomcat 404故障,sqlite3 qt 加密,网络爬虫逻辑是什么知乎,天猫php,徐州北京seo优化,手机网站菜单向上弹出,seo网页标签优化,dede 企业网站模板下载lzw

HTML代码:

电子书app源码,ubuntu运行建模软件,事件研究 爬虫俱乐部,php softbank,怎样理解SEOlzw

全选/全不选

jquery代码:

$(function(){//全选/全不选$("#all").click(function(){$("[name=items]:checkbox").attr("checked",this.checked);});$("[name=items]:checkbox").click(function(){var flag=true;$("[name=items]:checkbox").each(function(){if(!this.checked){flag=false;}});$("#all").attr("checked",flag);})//全选$("#selectAll").click(function(){$("[name=items]:checkbox").each(function(){$(this).attr("checked",true);});});//全不选$("#unSelect").click(function(){$("[name=items]:checkbox").each(function(){$(this).attr("checked",false);});});//反选$("#reverse").click(function(){$("[name=items]:checkbox").each(function(){ //遍历每一个复选框//$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取复选框的反向值this.checked=!this.checked; //js方法});});//输出选中的值$("#btn").click(function(){var str="你选中的是:\r\n";$("[name=items]:checkbox:checked").each(function(){str+=$(this).val()+"\r\n";});alert(str);});})

注:由于jquery版本的变更,新版本出现只能点击一次,老一点的版本是可以的,新的版本不可以使用attr来设置选中状态了,第一种解决方法是可以使用js原生的方法this.checked=true/false;

第二种解决方法是把attr换成prop。

以上所述是小编给大家介绍的jQuery对checkbox 复选框的全选全不选反选的操作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对PHP中文网的支持!

更多jQuery对checkbox 复选框的全选全不选反选的操作相关文章请关注PHP中文网!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。