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封装的分页组件
Jun 26 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jquery实现广告上下滚动效果
Mar 04 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
消息持续发送的完整例子
2006/10/09 PHP
利用PHP动态生成VRML网页
2006/10/09 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
培训专员岗位职责
2014/02/26 职场文书
主办会计岗位职责
2014/03/13 职场文书
平安校园建设方案
2014/05/02 职场文书
求职信模板
2014/05/23 职场文书
建筑工地标语
2014/06/18 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL