jQuery对checkbox的各种操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | //注意: 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上(包含)建议用prop //1、根据id获取checkbox $( "#cbCheckbox1" ); //2、获取所有的checkbox $( "input[type='checkbox']" ); //or $( "input[name='cb']" ); //3、获取所有选中的checkbox $( "input:checkbox:checked" ); //or $( "input:[type='checkbox']:checked" ); //or $( "input[type='checkbox']:checked" ); //or $( "input:[name='ck']:checked" ); //4、获取checkbox值 //用.val()即可,比如: $( "#cbCheckbox1" ).val(); //5、获取多个选中的checkbox值 var vals = []; $( 'input:checkbox:checked' ).each( function (index, item) { vals.push($( this ).val()); }); //6、判断checkbox是否选中(jquery 1.6以前版本 用 $(this).attr("checked")) $( "#cbCheckbox1" ).click( function () { if ($( this ).prop( "checked" )) { alert( "选中" ); } else { alert( "没有选中" ); } }); //7、设置checkbox为选中状态 $( 'input:checkbox' ).attr( "checked" , 'checked' ); //or $( 'input:checkbox' ).attr( "checked" , true ); //8、设置checkbox为不选中状态 $( 'input:checkbox' ).attr( "checked" , '' ); //or $( 'input:checkbox' ).attr( "checked" , false ); //9、设置checkbox为禁用状态(jquery<1.6用attr,jquery>=1.6建议用prop) $( "input[type='checkbox']" ).attr( "disabled" , "disabled" ); //or $( "input[type='checkbox']" ).attr( "disabled" , true ); //or $( "input[type='checkbox']" ).prop( "disabled" , true ); //or $( "input[type='checkbox']" ).prop( "disabled" , "disabled" ); //10、设置checkbox为启用状态(jquery<1.6用attr,jquery>=1.6建议用prop) $( "input[type='checkbox']" ).removeAttr( "disabled" ); //or $( "input[type='checkbox']" ).attr( "disabled" , false ); //or $( "input[type='checkbox']" ).prop( "disabled" , "" ); //or $( "input[type='checkbox']" ).prop( "disabled" , false ); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <title></title> </head> <body> <h3>jQuery操作checkbox </h3> <input type= "checkbox" id= "cbCheckbox1" value= "1" /> <input type= "checkbox" value= "2" /> <input type= "checkbox" disabled= "disabled" value= "3" /> <input type= "checkbox" value= "4" /> <input type= "checkbox" disabled= "true" value= "5" /> <br /> <input type= "button" id= "btnDisabled" value= "禁用" onclick= "fn_disabled();" /> <input type= "button" id= "Button1" value= "启用" onclick= "fn_enable();" /><br /> <input type= "button" id= "Button2" value= "获取选中的值" onclick= "getCheckedValues();" /><br /> <input type= "button" id= "Button3" value= "选中第二个" onclick= "checkedSecond();" /> <input type= "button" id= "Button4" value= "取消选中第二个" onclick= "uncheckedSecond();" /><br /> </body> </html> <script src= "js/jquery-1.9.1.min.js" type= "text/javascript" ></script> <script type= "text/javascript" > function fn_disabled() { //$("input[type='checkbox']").attr("disabled", "disabled"); //$("input[type='checkbox']").attr("disabled", true); $( "input[type='checkbox']" ).prop( "disabled" , true ); // $("input[type='checkbox']").prop("disabled", "disabled"); } function fn_enable() { // $("input[type='checkbox']").removeAttr("disabled"); // $("input[type='checkbox']").attr("disabled", false); // $("input[type='checkbox']").prop("disabled",""); $( "input[type='checkbox']" ).prop( "disabled" , false ); } //获取选中的 checkbox的值 function getCheckedValues() { var arr = []; $( "input[type='checkbox']:checked" ).each( function (index, item) { // arr.push($( this ).val()); }); alert(arr); } function checkedSecond() { // $("input[type='checkbox']:eq(1)").prop("checked", "checked"); $( "input[type='checkbox']:eq(1)" ).prop( "checked" , true ); } function uncheckedSecond() { // $("input[type='checkbox']:eq(1)").prop("checked", ""); $( "input[type='checkbox']:eq(1)" ).prop( "checked" , false ); } $( "#cbCheckbox1" ).click( function () { if ($( this ).prop( "checked" )) { //jquery 1.6以前版本 用 $(this).attr("checked") alert( "选中" ); } else { alert( "没有选中" ); } }); </script> |
转自:http://Www.CnBlogs.Com/WebEnh/
如果想下次快速找到我,记得点下面的关注哦!
本博客Android APP 下载 |
![]() |
支持我们就给我们点打赏 |
![]() |
支付宝打赏 支付宝扫一扫二维码 |
![]() |
微信打赏 微信扫一扫二维码 |
![]() |
如果想下次快速找到我,记得点下面的关注哦!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2018-06-15 在.NET开发中的单元测试工具之(1)——NUnit
2018-06-15 在.NET开发中的单元测试工具之(2)——xUnit.Net
2018-06-15 Git 头像修改 原
2018-06-15 Dapper.NET——轻量ORM
2017-06-15 Windows平台分布式架构实践 - 负载均衡
2017-06-15 WINDOWS 2008Server 配置nginx 反向代理服务器 安装成服务