Jquery 获取checkbox的checked问题


Posted in Javascript onNovember 16, 2011

注意: 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,    1.6以上(包含)建议用prop

1、根据id获取checkbox

 $("#Checkbox1");

2、获取所有的checkbox    

$("input[type='checkbox']");//或者$(":checkbox");

3、获取所有选中的checkbox  

  $("input:checkbox:checked");
  //或$("input[type='checkbox']:checked");
  //或$("input:[type='checkbox']:checked");

4、获取checkbox值
    用.val()获取

$("#Checkbox").val();

 5、获取多个选中的checkbox值   

var vals = [];
 $('input:checkbox:checked').each(function (index, item) {
 vals.push($(this).val());
 });

6、判断checkbox是否选中(jquery 1.6以前版本 用  $(this).attr("checked") 

  用prop查:选中时checked值为true,未选中时checked值为false

$("#cbCheckbox1").click(function () {
 if ($(this).prop("checked")) {
  alert("选中");
 } else {
  alert("没有选中");
 }
});

用attr查:选中checked值为checked,未选中时checked值为undefined

7、设置checkbox为选中状态  

$('input:checkbox').attr("checked", 'checked');

$('input:checkbox').prop("checked", true);

8、设置checkbox为不选中状态

$('input:checkbox').prop("checked", false);//或$('input:checkbox').attr("checked", '');

 9、设置checkbox为禁用状态(jquery<1.6用attr,jquery>=1.6建议用prop)   

$("input[type='checkbox']").attr("disabled", "disabled");
//或$("input[type='checkbox']").attr("disabled", true);
//或$("input[type='checkbox']").prop("disabled", true);
//或$("input[type='checkbox']").prop("disabled", "disabled");

10、设置checkbox为启用状态(jquery<1.6用attr,jquery>=1.6建议用prop)

$("input[type='checkbox']").removeAttr("disabled");
//或$("input[type='checkbox']").attr("disabled", false);
//或$("input[type='checkbox']").prop("disabled", "");

下面是其他网友的补充

事实证明一切,自己测试了N遍,发现网上的说法和自己以前的理解都是错的,不知道大家有没发现.

下面来看看网上大多资料的说法

转别人的一些东西:
jquery判断checkbox是否被选中
在html的checkbox里,选中的话会有属性checked="checked"。
如果用一个checkbox被选中,alert这个checkbox的属性"checked"的值alert($(#xxx).attr("checked")),会打印出"true",而不是"checked"!
如果没被选中,打印出的是"undefined"。
注意红色的部分,这里说到

$("#chekbox").sttr("checked")//should be print "true" , not "checked"

经过测试,证明上面说法有问题

<script type="text/javascript"> 
$(function() { 
$("#button").click(function() { 
alert($("#checkbox").attr("checked")); 
}); 
}); 
</script> 
<input type="checkbox" name="checkbox" id="checkbox">
<input type="button" id="button" value="Click Me">

//上面得出的结果是: 如果勾上checkbox,会打印出 “checked” , 如果取消打勾 会打印出 "undefined"
实验证明Jquery获取checked的值得打印出"true"是错误的
举一反三:
而且发现Jquery获取已经被勾上的checkbox,永远都是"checked" 这让人费解,如果有人知道为什么,可以告诉我一下,哈~~

<script type="text/javascript"> 
$(function() { 
$("#button").click(function() { 
alert($("#checkbox").attr("checked")); 
}); 
}); 
</script> 
<input type="checkbox" name="checkbox" id="checkbox" checked>
<input type="button" id="button" value="Click Me">

//注意红色位置,如果默认checkbox为checked状态,测试会发现,把勾去掉也是只会输出"checked" , 表示不理解为什么 Jquery会这样
解决方法,还是用document.get获取吧:

<script> 
function getcheckbox(){ 
var test = document.getElementById("checkbox").checked; 
alert(test); 
} 
</script> 
<input type="checkbox" name="checkbox" id="checkbox">
<input type="button" id="button" value="Click Me" onclick="getcheckbox()">

//选中为"true",取消选中为"false"
如果有错,希望指正。网上搜索的问题都是一个帖子转N遍,自己测试证明一下

checkbox选中与取消选择

1.html

<form>
 <input type="checkbox" name="items" value="足球" />足球
 <input type="checkbox" name="items" value="篮球" />篮球
 <input type="checkbox" name="items" value="羽毛球" />羽毛球
</form>

2.js

//全选中
$("input:checkbox").prop("checked","checked");
//取消选中
$("input:checkbox").removeAttr("checked");

注意:使用attr(),会发现代码那里的checked="checked",但是页面input上没有显示出来

Javascript 相关文章推荐
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
js返回顶部实例分享
Dec 21 Javascript
原生js实现回复评论功能
Jan 18 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
JS 操作符整理[推荐收藏]
Nov 15 #Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 #Javascript
关于js datetime的那点事
Nov 15 #Javascript
基于jquery封装的一个js分页
Nov 15 #Javascript
js 利用className得到对象的实现代码
Nov 15 #Javascript
基于jquery的web页面日期格式化插件
Nov 15 #Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 #Javascript
You might like
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
JavaScript的目的分析
2007/01/05 Javascript
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python3中的json模块使用详解
2018/05/05 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
python 如何在测试中使用 Mock
2021/03/01 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
如何选择使用结构还是类
2014/05/30 面试题
Unix如何添加新的用户
2014/08/20 面试题
团组织关系介绍信
2014/01/12 职场文书
初一学生期末评语
2014/04/24 职场文书
外贸业务员求职信
2014/06/16 职场文书
合作意向协议书
2015/01/29 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
Python 中面向接口编程
2022/05/20 Python
Redis过期数据是否会被立马删除
2022/07/23 Redis