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 相关文章推荐
cument.execCommand()用法深入理解
Dec 04 Javascript
js中的this关键字详解
Sep 25 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
JS数组属性去重并校验重复数据
Jan 10 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学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP时间类完整代码实例
2021/02/26 PHP
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Django中的ajax请求
2018/10/19 Python
django 自定义过滤器的实现
2019/02/26 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
大学校园活动策划书
2014/02/04 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
请客吃饭开场白
2015/06/01 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
排查Tomcat进程假死的问题
2022/05/06 Servers
vue实现在data里引入相对路径
2022/06/05 Vue.js