如何实现jQuery多选框功能
这篇文章主要介绍如何实现jQuery多选框功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联公司主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、成都响应式网站建设、程序开发、网站优化、微网站、微信平台小程序开发等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的成都做网站、成都网站制作、网站设计、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体。
Jquery多选框的基本操作:支持全选、反选、取消全选的功能
HTML正文:
全选/全不选
兴趣爱好:
篮球 足球 羽毛球
Javascript操作代码:
$("#c1").click(function(){ if(this.checked){ $("input[name='interst']").attr("checked","checked"); }else{ //$("input[name='interst']").attr("checked",""); //等价于 $("input[name='interst']").removeAttr("checked"); } }); $("#b1").click(function(){ $("input[name='interst']").attr("checked","checked"); }); $("#b2").click(function(){ $("input[name='interst']").attr("checked",""); }); $("#b3").click(function(){ $("input[name='interst']").each(function(){ if(this.checked){ this.checked=""; }else{ this.checked="checked"; } }); }); $("#b4").click(function(){ $("input[name='interst']:checked").each(function(){ alert(this.value); }); });
效果:
以上是“如何实现jQuery多选框功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网站栏目:如何实现jQuery多选框功能
分享路径:http://hbruida.cn/article/pdgdis.html