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 相关文章推荐
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 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+DBM的同学录程序(5)
2006/10/09 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
Ruby如何进行文件操作
2014/07/17 面试题
日语求职信范文
2013/12/17 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server
httpclient调用远程接口的方法
2022/08/14 Java/Android