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 相关文章推荐
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
深入理解PHP中的count函数
2016/05/31 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
php精度计算的问题解析
2019/06/21 PHP
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
详解Python当中的字符串和编码
2015/04/25 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
python删除不需要的python文件方法
2018/04/24 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
运动会标语
2014/06/21 职场文书
工伤事故证明
2014/10/20 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
Android studio 简单计算器的编写
2022/05/20 Java/Android
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL