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 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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简单选择排序算法实例
2015/01/26 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
stripos函数知识点实例分享
2019/02/11 PHP
php新建文件的方法实例
2019/09/26 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python中zip()函数用法实例教程
2014/07/31 Python
python简单获取数组元素个数的方法
2015/07/13 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
Python线程threading模块用法详解
2020/02/26 Python
python实现ftp文件传输功能
2020/03/20 Python
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
化学教师教学反思
2014/01/17 职场文书
妇产医师自荐信
2014/01/29 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
使用springMVC所需要的pom配置
2021/09/15 Java/Android
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript