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中文网!