jquery处理checkbox(复选框)是否被选中实例代码
时间:2019-03-30
本文章向大家介绍jquery处理checkbox(复选框)是否被选中实例代码,主要包括jquery处理checkbox(复选框)是否被选中实例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
jquery处理checkbox(复选框)是否被选中
现在如果一个复选框被选中,是用checked=true,checked="checked"也行
要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能正常使用,但是现在必须使用prop()方法代替
实例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>checkbox</title> </head> <body> <input type="button" id="btn1" value="全选"> <input type="button" id="btn2" value="取消全选"> <input type="button" id="btn3" value="选中所有奇数"> <input type="button" id="btn4" value="反选"> <input type="button" id="btn5" value="获得选中的所有值"> <input type="checkbox" value="checkbox1"/> <input type="checkbox" value="checkbox2"/> <input type="checkbox" value="checkbox3"/> <input type="checkbox" value="checkbox4"/> <input type="checkbox" value="checkbox5"/> <script src="js/jquery-3.2.0.min.js"></script> <script> $(function(){ var checkbox = $("input[type=checkbox]"); $("#btn1").on("click",function(){ checkbox.prop("checked",true); }); $("#btn2").on("click",function(){ checkbox.prop("checked",false); }); $("#btn3").on("click",function(){ $("input[type=checkbox]:even").prop("checked",true); }); $("#btn4").on("click",function(){ checkbox.each(function(){ if($(this).prop("checked")){ $(this).prop("checked",false); }else{ $(this).prop("checked",true); } }); }); $("#btn5").on("click",function(){ var str = ""; $("input[type=checkbox]").each(function(){ if($(this).prop("checked")){ str += $(this).val() + ","; } }); console.log(str); }); }); </script> </body> </html>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
- git命令-切换分支
- 如何让dedecms文章点击量增加一定的数值
- dedecms自增标签[field:global.autoindex/]的运用
- dedecms调用副栏目文章怎么操作
- 12个非常有用的JavaScript技巧
- 使用JPA中@Query 注解实现update 操作
- 配合dedecms内容模型实现后台输入栏目id前端输出文章列表
- SpringBoot之前端文件管理
- Spring Boot 设置静态资源访问
- IDEA更换主题
- 用正则表达式给字符串属性值都加上双引号
- Spring Boot修改启动端口
- Packet for query is too large (12238 > 1024). You can change this value
- win10下端口被占用解决办法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SAP Spartacus里ng-template的一个实际应用
- PAT (Basic Level) Practice (中文)1039 到底买不买 (20 分)
- PAT (Basic Level) Practice (中文)1013 数素数 (20 分)
- PAT (Basic Level) Practice (中文)1041 考试座位号 (15 分)
- 《Java 面试问题 一 Spring 、SpringMVC 、Mybatis》
- SAP Spartacus里的product carousel控件的实现cx-product-carousel
- PAT (Basic Level) Practice (中文)1014 福尔摩斯的约会 (20 分)
- 《数据结构与算法_插入排序》
- UGL之标准位图
- Linux(Centos7.X ) 配置Java 环境变量
- CNS图表复现05—免疫细胞亚群再分类
- PAT (Basic Level) Practice (中文)1015 德才论 (25 分)
- 前端下载二进制流文件
- element-ui 表格打印
- PAT (Basic Level) Practice (中文)1016 部分A+B (15 分)