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代码
Sep 02 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 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
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
调整PHP的性能
2013/10/30 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
提高php编程效率技巧
2015/08/13 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python元字符的用法实例解析
2018/01/17 Python
Python引用计数操作示例
2018/08/23 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
上课打牌的检讨书
2014/02/15 职场文书
仓库主管岗位职责
2014/03/02 职场文书
疾病捐款倡议书
2014/05/13 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书