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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery中map函数的两种方式
Apr 07 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jQuery实现购物车全功能
Jan 11 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.MVC的模板标签系统(一)
2006/09/05 PHP
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
javascript关于继承解析
2016/05/10 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
javascript中layim之查找好友查找群组
2021/02/06 Javascript
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
python批量处理文件或文件夹
2020/07/28 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python识别html主要文本框过程解析
2020/02/18 Python
为什么称python为胶水语言
2020/06/16 Python
Python实现京东抢秒杀功能
2021/01/25 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
Java servlet面试题
2012/03/04 面试题
中国央视网签名寄语
2014/01/18 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
教师个人年终总结
2015/02/11 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL