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 相关文章推荐
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
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
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
php实例化一个类的具体方法
2019/09/19 PHP
JS实现切换标签页效果实例代码
2013/11/01 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
js实现tab切换效果
2017/02/16 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
vue中如何使用ztree
2018/02/06 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
python实现LRU热点缓存及原理
2019/10/29 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
Django websocket原理及功能实现代码
2020/11/14 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
会计专业自我鉴定
2014/02/10 职场文书
公益广告宣传方案
2014/02/28 职场文书
保险经纪人求职信
2014/03/11 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
Python上下文管理器Content Manager
2021/06/26 Python
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS