jquery实现全选、反选、获得所有选中的checkbox


Posted in Javascript onSeptember 13, 2020

举了7个不同的checkbox状态,和大家一一分享。

1、全选

$("#btn1").click(function(){ 
$("input[name='checkbox']").attr("checked","true"); 
})

2、取消全选(全不选)

$("#btn2").click(function(){ 
$("input[name='checkbox']").removeAttr("checked"); 
})

3、选中所有奇数

$("#btn3").click(function(){ 
$("input[name='checkbox']:odd").attr("checked","true"); 
})

4、选中所有偶数

$("#btn6").click(function(){ 
$("input[name='checkbox']:even").attr("checked","true"); 
})

5、反选

$("#btn4").click(function(){ 
$("input[name='checkbox']").each(function(){ 
if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked","true"); 
} 
}) 
})

或者

$("#invert").click(function(){
 $("#ruleMessage [name='delModuleID']:checkbox").each(function(i,o){
  $(o).attr("checked",!$(o).attr("checked"));
 });
 });

6、获取选择项的值

var aa=""; 
$("#btn5").click(function(){ 
$("input[name='checkbox']:checkbox:checked").each(function(){ 
aa+=$(this).val() 
}) 
document.write(aa); 
}) 
})

7、遍历选中项

$("input[type=checkbox][checked]").each(function(){
 //由于复选框一般选中的是多个,所以可以循环输出 
 alert($(this).val()); 
});

下面实例讲述了jquery实现全选、反选、获得所有选中的checkbox。分享给大家供大家参考。具体如下:
运行效果截图如下:

jquery实现全选、反选、获得所有选中的checkbox

具体代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>无标题页</title> 
<script src="js/jquery-1.6.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
jQuery(function($){ 
//全选 
$("#btn1").click(function(){ 
$("input[name='checkbox']").attr("checked","true"); 
}) 
//取消全选 
$("#btn2").click(function(){ 
$("input[name='checkbox']").removeAttr("checked"); 
}) 
//选中所有基数 
$("#btn3").click(function(){ 
$("input[name='checkbox']:even").attr("checked","true"); 
}) 
//选中所有偶数 
$("#btn6").click(function(){ 
$("input[name='checkbox']:odd").attr("checked","true"); 
}) 
//反选 
$("#btn4").click(function(){ 
$("input[name='checkbox']").each(function(){ 
if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked","true"); 
} 
}) 
}) 
//或许选择项的值 
var aa=""; 
$("#btn5").click(function(){ 
$("input[name='checkbox']:checkbox:checked").each(function(){ 
aa+=$(this).val() 
}) 
document.write(aa); 
}) 
}) 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="button" id="btn1" value="全选"> 
<input type="button" id="btn2" value="取消全选"> 
<input type="button" id="btn3" value="选中所有奇数"> 
<input type="button" id="btn6" value="选中所有偶数"> 
<input type="button" id="btn4" value="反选"> 
<input type="button" id="btn5" value="获得选中的所有值"> 
<br> 
<input type="checkbox" name="checkbox" value="checkbox1"> 
checkbox1 
<input type="checkbox" name="checkbox" value="checkbox2"> 
checkbox2 
<input type="checkbox" name="checkbox" value="checkbox3"> 
checkbox3 
<input type="checkbox" name="checkbox" value="checkbox4"> 
checkbox4 
<input type="checkbox" name="checkbox" value="checkbox5"> 
checkbox5 
<input type="checkbox" name="checkbox" value="checkbox6"> 
checkbox6 
<input type="checkbox" name="checkbox" value="checkbox7"> 
checkbox7 
<input type="checkbox" name="checkbox" value="checkbox8"> 
checkbox8 
</div> 
</form> 
</body> 
</html>

以上就是关于jquery中checkbox使用方法简单实例演示,希望对大家的学习有所帮助。

Javascript 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
js实现继承的5种方式
Dec 01 #Javascript
6种javascript显示当前系统时间代码
Dec 01 #Javascript
基于jQuery实现网页打印功能
Dec 01 #Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 #Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 #Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 #Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 #Javascript
You might like
第三节 定义一个类 [3]
2006/10/09 PHP
对javascript和select部件的结合运用
2006/10/09 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
快速处理vue渲染前的显示问题
2018/03/05 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
python多线程操作实例
2014/11/21 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
python针对excel的操作技巧
2018/03/13 Python
python语音识别实践之百度语音API
2018/08/30 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
python模块常用用法实例详解
2019/10/17 Python
python已协程方式处理任务实现过程
2019/12/27 Python
python Canny边缘检测算法的实现
2020/04/24 Python
商务日语毕业生自荐信
2013/11/23 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
个人对照检查材料
2014/02/12 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技