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.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
Java中Timer的用法详解
Oct 21 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
vue实现下载文件流完整前后端代码
Nov 17 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 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
Python 统计字数的思路详解
2018/05/08 Python
Python多进程写入同一文件的方法
2019/01/14 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
销售人员职业生涯规划范文
2014/03/01 职场文书
小学生优秀评语大全
2014/04/22 职场文书
销售口号大全
2014/06/11 职场文书
爱国口号
2014/06/19 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
Python打包为exe详细教程
2021/05/18 Python
在python中读取和写入CSV文件详情
2022/06/28 Python