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实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 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
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
js确定对象类型方法
2012/03/30 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
axios基本入门用法教程
2017/03/25 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
opencv python图像梯度实例详解
2020/02/04 Python
Python3实现飞机大战游戏
2020/04/24 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
汽修专业学生自我鉴定
2013/11/16 职场文书
阿德的梦教学反思
2014/02/06 职场文书
园艺师求职信
2014/03/10 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis