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实现简单的抽奖游戏
May 05 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
jquery插件实现搜索历史
Apr 24 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
jQuery操作cookie
2016/08/08 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
独特的python循环语句
2016/11/20 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
Python调用Windows命令打印文件
2020/02/07 Python
python两种注释用法的示例
2020/10/09 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
澳大利亚相机之家:Camera House
2017/11/30 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
品管员岗位职责
2013/11/10 职场文书
陈欧的广告词
2014/03/18 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
联谊活动总结范文
2015/05/09 职场文书
借条如何写
2015/05/26 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
Golang 并发编程 SingleFlight模式
2022/04/26 Golang