jquery操作checkbox火狐下第二次无法勾选的解决方法


Posted in Javascript onOctober 10, 2016

最近在学习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"));
   });
  });

希望对大家有所帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
Javascript动画效果(1)
Oct 11 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
js根据后缀判断文件文件类型的代码
May 09 Javascript
浅谈jquery中使用canvas的问题
Oct 10 #Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 #Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 #Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 #Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 #Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 #Javascript
js中获取键盘事件的简单实现方法
Oct 10 #Javascript
You might like
PHP编码规范-php coding standard
2007/03/16 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
python线程池如何使用
2020/05/28 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
HTML5实现预览本地图片
2016/02/17 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
促销活动总结
2014/04/28 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
邀请函的格式
2015/01/30 职场文书
关于保护环境的建议书
2019/06/24 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python