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判断是否已经弹出页面
Oct 20 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 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
图书管理程序(二)
2006/10/09 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
python中使用序列的方法
2015/08/03 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
《埃及的金字塔》教学反思
2014/04/07 职场文书
建设工地安全标语
2014/06/07 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers