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中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 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
提取HTML标签
2006/10/09 PHP
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
深入apache host的配置详解
2013/06/09 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
PHP打印输出函数汇总
2016/08/28 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
python实现字典嵌套列表取值
2019/12/16 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
职工运动会邀请函
2014/02/02 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
推荐信格式要求
2014/05/09 职场文书
计算机软件专业求职信
2014/06/10 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
人事主管岗位职责
2015/02/04 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
领导离职感言
2015/08/03 职场文书
高中历史教学反思
2016/02/19 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
创业计划书之美甲店
2019/09/20 职场文书