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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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生成自己的LOG文件
2006/10/09 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
python处理csv数据的方法
2015/03/11 Python
处理Python中的URLError异常的方法
2015/04/30 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python实现画循环圆
2019/11/23 Python
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
2014年小学元旦活动方案
2014/02/12 职场文书
广告设计应届生求职信
2014/03/01 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2014年政教处工作总结
2014/12/20 职场文书
工作会议简报
2015/07/20 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript