jquery处理checkbox(复选框)是否被选中实例代码


Posted in jQuery onJune 12, 2017

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>

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

jQuery 相关文章推荐
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 #jQuery
jquery与js实现全选功能的区别
Jun 11 #jQuery
jQuery 表单序列化实例代码
Jun 11 #jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 #jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 #jQuery
jQuery复合事件用法示例
Jun 10 #jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 #jQuery
You might like
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
javascript每日必学之循环
2016/02/19 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
判断单链表中是否存在环
2012/07/16 面试题
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
开会迟到检讨书
2014/02/03 职场文书
超市理货员岗位职责
2014/07/04 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
2014年网管工作总结
2014/12/11 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
医院志愿者活动总结
2015/05/06 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书