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加密密码到cookie的实现代码
Apr 18 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery实现高级检索功能
May 28 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jquery实现烟花效果(面向对象)
Mar 10 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中的 == 运算符进行字符串比较
2006/11/26 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
php事件驱动化设计详解
2016/11/10 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
js防止表单重复提交实现代码
2012/09/05 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
js运动应用实例解析
2015/12/28 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
vue实现扫码功能
2020/01/17 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
Python三元运算实现方法
2015/01/12 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
Python中取整的几种方法小结
2017/01/06 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
公司司机岗位职责范本
2014/03/03 职场文书
简单租房协议书
2014/04/09 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
2014全年工作总结
2014/11/27 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
教你怎么用Python实现多路径迷宫
2021/04/29 Python
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android
Redis基本数据类型List常用操作命令
2022/06/01 Redis