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 append与appendTo方法比较
May 24 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 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中call_user_func_array()函数的用法演示
2012/02/05 PHP
preg_match_all使用心得分享
2014/01/31 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
文字幻灯片
2006/06/26 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
javascript中的隐式调用
2018/02/10 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
基于Python实现的微信好友数据分析
2018/02/26 Python
Python3处理HTTP请求的实例
2018/05/10 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
python3 enum模块的应用实例详解
2019/08/12 Python
python银行系统实现源码
2019/10/25 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
最新pycharm安装教程
2020/11/18 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
校运会口号
2014/06/18 职场文书
银行授权委托书格式
2014/10/10 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
初中团委工作总结
2015/08/13 职场文书
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python
Python+pyaudio实现音频控制示例详解
2022/07/23 Python