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 相关文章推荐
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
原生js二级联动效果
Jun 20 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 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
Oracle 常见问题解答
2006/10/09 PHP
session 的生命周期是多长
2006/10/09 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
PHP实现验证码校验功能
2017/11/16 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
Three.js基础学习教程
2017/11/16 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
python 读写中文json的实例详解
2017/10/29 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python 如何测试文件是否存在
2020/07/31 Python
python Matplotlib模块的使用
2020/09/16 Python
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
统计员岗位职责
2013/11/14 职场文书
小学教学随笔感言
2014/02/26 职场文书
电子商务专业自荐信
2014/06/02 职场文书
党员作风建设整改方案
2014/10/27 职场文书
经典导游欢迎词
2015/01/26 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
python运行脚本文件的三种方法实例
2022/06/25 Python