浅谈jQuery中的checkbox问题
一开始的代码:
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>复选框</title> <scriptsrc="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <scripttype="text/javascript"> $(function(){ $("#all").click(function(){ if(this.checked){ $("#list:checkbox").each(function(){ $(this).attr("checked",true);//选择器要有空格隔开 }) }else{ $("#list:checkbox").each(function(){ $(this).attr("checked",false); }) } }); }) </script> </head> <body> <ulid="list"> <li><label><inputtype="checkbox"value="1">广东省</label></li> <li><label><inputtype="checkbox"value="2">广西省</label></li> <li><label><inputtype="checkbox"value="3">河南省</label></li> <li><label><inputtype="checkbox"value="4">福建省</label></li> <li><label><inputtype="checkbox"value="5">湖南省</label></li> <li><label><inputtype="checkbox"value="6">江西省</label></li> </ul> <inputtype="checkbox"id="all"> <inputtype="button"value="全选"class="btn"id="selectAll"> <inputtype="button"value="全不选"class="btn"id="unSelect"> <inputtype="button"value="反选"class="btn"id="reverse"> <inputtype="button"value="获得选中的所有值"class="btn"id="getValue"> </body> </html>
当使用带有jQuery的方法attr()时,会有相应的问题存在,比如当你在点击id=all的复选框前去点击id=list下的复选框,这时当你再次点击id=all的复选框时就会出现之前点击的复选框没有变化,但是查看元素时发现该复选框的checked值会发生相应的变化。我查了一下资料,问题出在如下:
原来是jQuery版本问题。因为这里用的是attr(),而jQuery的版本用的是3.1.0的,这就存在一个兼容性问题。
$("XXX").attr("attrName");而jQuery的版本用的是2.1.1,这就是存在一个兼容性和稳定性问题。
jQueryAPI明确说明,1.6+的jQuery要用prop,尤其是checkBox的checked的属性的判断,
即使用代码如下:
$(function(){ $("#all").click(function(){ if(this.checked){ $("#list:checkbox").each(function(){ $(this).prop("checked",true);//选择器要有空格隔开 }) }else{ $("#list:checkbox").each(function(){ $(this).prop("checked",false); }) } });
给出使用jQuery事先的全选和全不选:
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>复选框</title> <scriptsrc="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <scripttype="text/javascript"> $(function(){ $("#all").click(function(){ if(this.checked){ $("#list:checkbox").each(function(){ $(this).prop("checked",true);//选择器要有空格隔开 }) }else{ $("#list:checkbox").each(function(){ $(this).prop("checked",false); }) } }); //第二种 //$("#all").click(function(){ //if(this.checked){ //$("#list:checkbox").prop("checked",true); //}else{ //$("#list:checkbox").prop("checked",false); //} //}); //全选 $("#selectAll").click(function(){ $("#list:checkbox,#all").prop("checked",true); }); //全不选 $("#unSelect").click(function(){ $("#list:checkbox,#all").prop("checked",false); }); //反选 $("#reverse").click(function(){ $("#list:checkbox").each(function(){ //$(this).prop("checked",!$(this).prop("checked")); this.checked=!this.checked; }); if($('#list:checkbox:checked').length==$("#list:checkbox").length){ $("#all").prop("checked",true); } else{ $("#all").prop("checked",false); } }); //获取选中的值 $("#getValue").click(function(){ varvalArr=newArray(); $("#list:checkbox:checked").each(function(i){//判断被选中的 valArr[i]=$(this).val(); }) varvals=valArr.join(',');//转换为逗号隔开的字符串 alert(vals); }); }) </script> </head> <body> <ulid="list"> <li><label><inputtype="checkbox"value="1.广东省">广东省</label></li> <li><label><inputtype="checkbox"value="2.广西省">广西省</label></li> <li><label><inputtype="checkbox"value="3.河南省">河南省</label></li> <li><label><inputtype="checkbox"value="4.福建省">福建省</label></li> <li><label><inputtype="checkbox"value="5.湖南省">湖南省</label></li> <li><label><inputtype="checkbox"value="6.江西省">江西省</label></li> </ul> <inputtype="checkbox"id="all"> <inputtype="button"value="全选"class="btn"id="selectAll"> <inputtype="button"value="全不选"class="btn"id="unSelect"> <inputtype="button"value="反选"class="btn"id="reverse"> <inputtype="button"value="获得选中的所有值"class="btn"id="getValue"> </body> </html>
使用原声JS实现全选和全不选
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title></title> </head> <body> <scripttype="text/javascript"> functioncheckAll(name){ varel=document.getElementsByTagName('input'); varlen=el.length; for(vari=0;i<len;i++){ if((el[i].type=="checkbox")&&(el[i].name==name)){ el[i].checked=true; } } } functionclearAll(name){ varel=document.getElementsByTagName('input'); varlen=el.length; for(vari=0;i<len;i++){ if((el[i].type=="checkbox")&&(el[i].name==name)){ el[i].checked=false; } } } </script> <inputtype="checkbox"name="test"value=""onclick="if(this.checked==true){checkAll('test');}else{clearAll('test');}"/>字母全选开关 <inputtype="checkbox"name="test"value="a"/>a <inputtype="checkbox"name="test"value="b"/>b <inputtype="checkbox"name="test"value="c"/>c <inputtype="checkbox"name="test"value="d"/>d <inputtype="checkbox"name="test"value="e"/>e <inputtype="checkbox"name="test"value="f"/>f <inputtype="checkbox"name="test"value="g"/>g <br> <inputtype="checkbox"name="num"value=""onclick="if(this.checked==true){checkAll('num');}else{clearAll('num');}"/>数字全选开关<inputtype="checkbox"name="num"value="1"/>1 <inputtype="checkbox"name="num"value="2"/>2 <inputtype="checkbox"name="num"value="3"/>3 <br><br> <inputtype="button"value="选择所有的字母"onclick="checkAll('test')"/><inputtype="button"value="清空选中的字母"onclick="clearAll('test')"/><br><br> <inputtype="button"value="选择所有的数字"onclick="checkAll('num')"/><inputtype="button"value="清空选中的数字"onclick="clearAll('num')"/> </body> </html>
最后插入attr()与prop()的区别:
jquery1.6中新加了一个方法prop(),官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。
大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled="disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。
jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
那么,什么时候使用attr(),什么时候使用prop()?
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
项目中jquery升级的时候大家要注意这点!
以下是官方建议attr(),prop()的使用:
Attribute/Property | .attr() | .prop() |
---|---|---|
accesskey | √ | |
align | √ | |
async | √ | √ |
autofocus | √ | √ |
checked | √ | √ |
class | √ | |
contenteditable | √ | |
draggable | √ | |
href | √ | |
id | √ | |
label | √ | |
location(i.e.window.location) | √ | √ |
multiple | √ | √ |
readOnly | √ | √ |
rel | √ | |
selected | √ | √ |
src | √ | |
tabindex | √ | |
title | √ | |
type | √ | |
width(ifneededover |
√ |
以上这篇浅谈jQuery中的checkbox问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。