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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jquery仿微信聊天界面
May 06 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
jQuery冲突问题解决方法
Jan 19 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中文分词 自动获取关键词介绍
2012/11/13 PHP
php去除HTML标签实例
2013/11/06 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
js获取页面description的方法
2015/05/21 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python实现DES加密解密方法实例详解
2015/06/30 Python
Python中进程和线程的区别详解
2017/10/29 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
python logging日志模块原理及操作解析
2019/10/12 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
python中如何使用虚拟环境
2020/10/14 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
酒店总经理岗位职责
2014/03/17 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
介绍信如何写
2015/01/31 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
2016教师国培研修感言
2015/12/08 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript