基于jquery实现复选框全选,反选,全不选等功能
更新时间:2015年10月16日 14:22:39 投稿:lijiao
本文分享一段基于jQuery实现的复选框全选、全不选、反选功能的代码,有需要的小伙伴可以参考一下
jquery 实现全选,反选,全不选等功能,下面直接以例子进行说明。设页面有如下一组复选框和几个相关按钮(全选,反选,全不选等):
<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一键控制checkbox全选、反选或全不选
- jQuery对checkbox 复选框的全选全不选反选的操作
- jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
- jquery实现全选、不选、反选的两种方法
- jQuery实现全选、反选和不选功能
- 利用jQuery实现CheckBox全选/全不选/反选的简单代码
- JQuery选中checkbox方法代码实例(全选、反选、全不选)
- jquery全选/全不选/反选另一种实现方法(配合原生js)
- 基于jQuery实现复选框的全选 全不选 反选功能
- jquery 全选、全不选、反选效果的实现代码【推荐】
- jQuery实现全选、反选和不选功能的方法详解
相关文章
JQuery统计input和textarea文字输入数量(代码分享)
本文主要介绍了jQuery实现统计输入文字个数的方法,具有一定的参考价值,需要的朋友一起来看下吧2016-12-12jquery UI Datepicker时间控件的使用及问题解决
这篇文章主要介绍了jquery UI Datepicker时间控件的使用及与asp.net中的UpdatePanel联合使用时的失效问题解决,感兴趣的小伙伴们可以参考一下2016-04-04打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
本文主要讲诉了如何一起一步一步打造个性化的VirtualKeyboard:功能强大的Jquery虚拟键盘,非常的详细,非常实用,有需要的朋友可以参考下2014-10-10Jqyery中同等与js中windows.onload的应用
我们知道,在javascript中用来执行页面加载中的操作时候,我们会使用windows.onload=function(){}或者windows.onload=函数名(),也可以在body中调用onload事件调用方法即可,在jQuery中也有相当的代码2011-05-05
最新评论