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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
JQuery省市联动效果实现过程详解
May 08 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 图片上添加透明度渐变的效果
2009/06/29 PHP
php cli 小技巧
2013/06/03 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
javascript 页面只自动刷新一次
2009/07/10 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
一年级家长会邀请函
2014/01/25 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
先进工作者个人总结
2015/02/15 职场文书
保送生自荐信范文
2015/03/26 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
基于Python实现射击小游戏的制作
2022/04/06 Python
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python
mysql sock 文件解析及作用讲解
2022/07/15 MySQL