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 相关文章推荐
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
JS闭包用法实例分析
Mar 27 Javascript
JavaScript的继承实现小结
May 07 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
JS实现京东商品分类侧边栏
Dec 11 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
基于mysql的论坛(6)
2006/10/09 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
css配合jquery美化 select
2013/11/29 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
详解python单例模式与metaclass
2016/01/15 Python
python生成验证码图片代码分享
2016/01/28 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
《母鸡》教学反思
2014/02/25 职场文书
优秀员工推荐信
2014/05/10 职场文书
2015年共青团工作总结
2015/05/15 职场文书
让世界充满爱观后感
2015/06/10 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript