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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
vue判断input输入内容全是空格的方法
Mar 02 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
vue循环数组改变点击文字的颜色
Oct 14 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 安全过滤函数代码
2011/05/07 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
JQuery live函数
2010/12/24 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
实战node静态文件服务器的示例代码
2018/03/08 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
Python文件操作基础流程解析
2020/03/19 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
求职信格式范本
2013/11/15 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
小学英语教学反思
2014/01/30 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
英文求职信写作小建议
2014/02/16 职场文书
教师节促销方案
2014/03/22 职场文书
城管大队整治方案
2014/05/06 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS