作家
登录

jquery 实现checkbox全选,反选,全不选等功能代码(奇数)

作者: 来源:www.28hudong.com 2013-03-30 00:21:44 阅读 我要评论

设页面有如下一组复选框和几个相关按钮(全选,反选,全不选等): 复制代码 代码如下: <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type="checkbox" name="fruit" value="banana" />香蕉 <input type="checkbox" name="fruit" value="grape" />葡萄 <input type="button" id="btn1" value="全选"> <input type="button" id="btn2" value="全不选"> <input type="button" id="btn3" value="反选"> <input type="button" id="btn4" value="选中所有奇数"> <input type="button" id="btn5" value="获得选中的所有值"> 则分别实现相关功能的完整代码如下: 复制代码 代码如下: $(function(){ $('#btn1').click(function(){//全选 $("[name='fruit']").attr('checked','true'); }); $('#btn2').click(function(){//全不选 $("[name='fruit']").removeAttr('checked'); }); $('#btn3').click(function(){//反选 $("[name='fruit']").each(function(){ if($(this).attr('checked')){ $(this).removeAttr('checked'); }else{ $(this).attr('checked','true'); } }) }); $("#btn4").click(function(){//选中所有奇数 $("[name='fruit']:even").attr('checked','true'); }) $("#btn5").click(function(){//获取所有选中的选项的值 var checkVal=''; $("[name='fruit'][checked]").each(function(){ checkVal+=$(this).val()+','; }) alert(checkVal); }) }); 注意使用 jquery 之前必须要引入 jquery 包哦!

  推荐阅读

  基于jquery自己写tab滑动门(通用版)

css: 复制代码 代码如下: .main { height:360px; width:290px; border:1px solid #444444; font-size:12px; color:#444444; margin:20px; } .main_top { height:30px; width:290px; line-height:30px; text-align:>>>详细阅读


本文标题:jquery 实现checkbox全选,反选,全不选等功能代码(奇数)

地址:http://www.17bianji.com/kaifa2/JS/23010.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)