jquery checkbox的相关操作总结


Posted in Javascript onOctober 17, 2016

jquery checkbox的相关操作——全选、反选、获得所有选中的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()); 
});

 8、例子

<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>

9、效果图

jquery checkbox的相关操作总结

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
window.location.hash 属性使用说明
Mar 20 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
JS动态添加选项案例分析
Oct 17 #Javascript
Java  Spring 事务回滚详解
Oct 17 #Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 #Javascript
js浏览器html5表单验证
Oct 17 #Javascript
使用开源工具制作网页验证码的方法
Oct 17 #Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 #Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 #Javascript
You might like
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
基于php 随机数的深入理解
2013/06/05 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
JavaScript中原型和原型链详解
2015/02/11 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python迭代dict的key和value的方法
2018/07/06 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
分析python请求数据
2018/08/19 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
介绍一下sql server的安全性
2014/08/10 面试题
数据库什么时候应该被重组
2012/11/02 面试题
小学开学典礼主持词
2014/03/19 职场文书
股权收购意向书
2014/04/01 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
雨中的树观后感
2015/06/03 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
Win11快速关闭所有广告推荐
2022/04/19 数码科技