jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中、取消选中、获取被选中的值、判断是否选中等
一、checked属性定义 先了解下input标签的checked属性: 1、HTML <input> checked 属性 ◆ 定义和用法 checked 属性是一个布尔属性。 checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 checked 属性适用于 <input type="checkbox"> 和 <input type="radio">。 checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置。 ◆ HTML 4.01 与 HTML5之间的差异 无。 ◆ HTML 与 XHTML 之间的差异 在 XHTML 中,禁止属性最小化,checked 属性必须定义为<input checked="checked" />。 本文讨论的范围为jQuery1.6+ 以上版本,现在jQuery已经到3.2.1了(2018年1月4日)! 。开发中建议使用1.11及以上版本。 二、checked属性的用法 注意:操作checked、disabled、selected属性,强制建议只用prop()方法!!,不要用attr()方法。 1、jQuery判断checked是否是选中状态的三种方法: .attr('checked') // 返回:"checked"或"undefined" ; .prop('checked') // 返回true/false .is(':checked') // 返回true/false //别忘记冒号哦 2、jQuery赋值checked的几种写法: 所有的jQuery版本都可以这样赋值,不建议用attr(): $("#cb1").attr("checked","checked"); //通用做法,现在不推荐了 $("#cb1").attr("checked",true); //不标准,不推荐了 $("#cb1").attr("checked","true"); //不标准,不推荐了 jQuery的prop()的4种赋值(推荐如下写法): $("#cb1").prop("checked",true); //标准写法,推荐! $("#cb1").prop({checked:true}); //map键值对 $("#cb1").prop("checked",function(){ return true;//函数返回true或false }); //$("#cb1").prop("checked","checked"); //不标准 三、标签中checked="checked"已有,但却不显示打勾的解决办法 在做web项目的时候,做了一个功能,就是当勾选栏目,把所有的角色全勾上。刚开始使用了如下代码: function check(id,check) { if (check) { $("." + id).find("input[type='checkbox']").attr("checked", true); } else { $("." + id).find("input[type='checkbox']").attr("checked", false); } } 第一遍勾选和取消是有效的,但是第二遍以后就没反应了,查看了属性,发现checked属性一直存在,但是没显示勾。就考虑移除checked属性看看。 function check(id,check) { if (check) { $("." + id).find("input[type='checkbox']").attr("checked", true); } else { $("." + id).find("input[type='checkbox']").removeAttr("checked"); } } 这次看到checked属性勾上有了,取消就没了,可是问题还是没解决,还是第二遍以后就没反应了。 可是我都用1.11的版本了,正确的做法是使用prop()方法设置checkbox的checked属性值。 function check(id,check) { if (check) { $("." + id).find("input[type='checkbox']").prop("checked", true); } else { $("." + id).find("input[type='checkbox']").prop("checked", false); } } 这个问题会出现的本质就是,jQuery中的attr()和prop()两个方法的使用区别。 具体请参考: jQuery中的attr()与prop()设置属性、获取属性的区别 - chunlynn的小屋 - CSDN博客 http://blog.csdn.net/chenchunlin526/article/details/77426796 四、jQuery操作checkbox技巧总结 1、获取单个checkbox选中项的值(三种写法) $("#chx1").find("input:checkbox:checked").val() //或者 $("#chx1").find("input:[type='checkbox']:checked").val(); $("#chx1").find("input[type='checkbox']:checked").val(); //或者 $("#chx1").find("input:[name='ck']:checked").val(); $("#chx1").find("input[name='ck']:checked").val(); 2、 获取多个checkbox选中项 $("#chk1").find('input:checkbox').each(function() { //遍历所有复选框 if ($(this).prop('checked') == true) { console.log($(this).val()); //打印当前选中的复选框的值 } }); function getCheckBoxVal(){ //jquery获取所有选中的复选框的值 var chk_value =[]; $("#chk1").find('input[name="test"]:checked').each(function(){ //遍历,将所有选中的值放到数组中 chk_value.push($(this).val()); }); alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value); } 3、设置第一个checkbox 为选中值 $("#chk1").find('input:checkbox:first').prop("checked",true); //或者 $("#chk1").find('input:checkbox').eq(0).prop("checked",true); 4、设置最后一个checkbox为选中值 $("#chk1").find('input:checkbox:last').prop("checked",true); 5、根据索引值设置任意一个checkbox为选中值 $("#chk1").find('input:checkbox').eq(索引值).prop('checked', true); //索引值=0,1,2.... //或者 $("#chk1").find('input:checkbox').slice(1,2).prop('checked', true); //同时选中第0个和第1个checkbox //从索引0开始(包含),到索引2(不包含)的checkbox 6、根据value值设置checkbox为选中值 $("#chk1").find("input:checkbox[value='1']").prop('checked',true); $("#chk1").find("input[type='checkbox'][value='1']").prop('checked',true); 7、删除checkbox:①删除value=1的checkbox ②删除第几个checkbox $("#chk1").find("input:checkbox[value='1']").remove(); //将匹配元素从DOM中删除,将标签从页面上删除了 $("#chk1").find("input:checkbox").eq(index).remove(); //索引值 index=0,1,2.... //如删除第3个checkbox: $("#chk1").find("input:checkbox").eq(2).remove(); 8、全部选中或全部取消选中 $("#chk1").find('input:checkbox').each(function() { $(this).prop('checked', true); }); //或者 $("#chk1").find('input:checkbox').each(function () { $(this).prop('checked',false); }); 9、选中所有奇数项或偶数项 $("#chk1").find("input[type='checkbox']:even").prop("checked",true); //选中所有偶数 $("#chk1").find("input[type='checkbox']:odd").prop("checked",true); //选中所有奇数 10、反选 方法一: $("#btn4").click(function(){ $("input[type='checkbox']").each(function(){ //反选 if($(this).prop("checked")){ $(this).prop("checked",false); } else{ $(this).prop("checked",true); } }); }); 方法二: $("#btn4").on('click',function(){ //反选所有的复选框(没选中的改为选中,选中的改为取消选中) $("#chk1").find("input[type='checkbox']").prop("checked", function(index, oldValue){ return !oldValue; }); }