jquery操作checkbox火狐下第二次无法勾选的解决方法
网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要介绍了jquery操作checkbox火狐下第二次无法勾选问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
最近在学习jQuery(版本jquery-1.9.1.js),要求用jQuery实现全选/全不选、反选,在IE(IE8)中没有问题,但在火狐浏览器中调试的时候出现了一些小问题,达不到效果。
html代码如下
<div> 你爱好的运动是 <input type="checkbox" id="selectal1" /><label for="selectal1">全选/全不选</label><br/> <input name="intrest" type="checkbox" />足球 <input name="intrest" type="checkbox" />篮球 <input name="intrest" type="checkbox" />羽毛球 <input name="intrest" type="checkbox" />乒乓球<br/> <button id="allbtn">全选</button> <button id="notallbtn">全不选</button> <button id="reversebtn">反选</button> <button>提交</button> </div>
jQuery代码
<script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript"> $().ready(function(){ //全选/全不选复选框 $("#selectal1").click( function(){ if($(this).attr("checked")==true){ $("input:checkbox[id!='selectal1']").each(function() { $(this).attr("checked",true); }); }else{ $("input:checkbox[id!='selectal1']").each(function() { $(this).attr("checked",false); }); } }); //全选按钮 $("#allbtn").click(function(){ $("input:checkbox[id!='selectal1']").each(function() { $(this).attr("checked",true); }); }); //全不选按钮 $("#notallbtn").click(function(){ $("input:checkbox[id!='selectal1']").each(function() { $(this).attr("checked",false); }); }); //反选按钮 $("#reversebtn").click(function(){ $("input:checkbox[id!='selectal1']").each(function() { $(this).attr("checked",!$(this).attr("checked")); }); }); }) </script>
复选框绑定了click事件,点一次选中,再点击取消选中,依次类推。这个功能在IE8中没问题,在firefox中测试的时候,前两次都没有问题,可以正常显示选中和取消,但当再去选中的时候,复选框的属性checkbox值变为”checked”,没问题,复选框却不在显示选中状态,明明属性值改了,却不显示勾选,我以为是浏览器缓存的问题,删除缓存还是不行……..后来在网上看到了方法,说是jQuery版本的问题,jQuery1.6以上用attr会存在兼容性问题,得换成prop。
查了下API prop属性是这样的
prop(name|properties|key,value|fn)
概述
获取在匹配的元素集中的第一个元素的属性值。
随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误。
jQuery API明确说明,1.6+的jQuery要用prop,尤其是checkBox的checked的属性的判断,于是乎把js代码里面的attr换成prop就行了。
代码
//1.6+的jQuery要用prop代替attr否则达不到效果!!!! //全选/全不选复选框 $("#selectal1").click( function(){ if($(this).prop("checked")==true){ $("input:checkbox[id!='selectal1']").each(function() { $(this).prop("checked",true); }); }else{ $("input:checkbox[id!='selectal1']").each(function() { $(this).prop("checked",false); }); } }); //全选按钮 $("#allbtn").click(function(){ $("input:checkbox[id!='selectal1']").each(function() { $(this).prop("checked",true); }); }); //全不选按钮 $("#notallbtn").click(function(){ $("input:checkbox[id!='selectal1']").each(function() { $(this).prop("checked",false); }); }); //反选按钮 $("#reversebtn").click(function(){ $("input:checkbox[id!='selectal1']").each(function() { $(this).prop("checked",!$(this).prop("checked")); }); });
希望对大家有所帮助。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程