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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
vue配置多代理服务接口地址操作
Sep 08 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函数,php爱好者站推荐
2007/03/19 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
jQuery示例收集
2010/11/05 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
办加油卡单位介绍信
2014/01/09 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
顶岗实习协议书
2015/01/29 职场文书
党员反邪教心得体会
2016/01/15 职场文书
合作协议书格式范本
2016/03/21 职场文书