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实现文章图片弹出放大效果
Apr 06 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
JSONP跨域请求
2017/03/02 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
Python下rrdtool模块的基本使用方法
2015/11/13 Python
浅谈五大Python Web框架
2017/03/20 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python编写弹球游戏的实现代码
2018/03/12 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
使用Python 统计高频字数的方法
2019/01/31 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Python常用库大全及简要说明
2020/01/17 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
什么是属性访问器
2015/10/26 面试题
幼师求职自荐信范文
2014/01/26 职场文书