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 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
基于jquery实现图片放大功能
May 07 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
js对象与打印对象分析比较
2013/04/23 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
使用Python下载Bing图片(代码)
2013/11/07 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
PyQt5响应回车事件的方法
2019/06/25 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
详解python with 上下文管理器
2020/09/02 Python
Python项目打包成二进制的方法
2020/12/30 Python
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
新娘父亲婚礼致辞
2014/01/16 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
对教师的评语
2014/04/28 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
地道战观后感500字
2015/06/04 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
python语言中pandas字符串分割str.split()函数
2022/08/05 Python