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 相关文章推荐
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
js类的继承定义与用法分析
Jun 21 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 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中看实例学正则表达式
2006/12/25 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
PHP如何使用Memcached
2016/04/05 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
JS 动态加载脚本的4种方法
2009/05/05 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
python中map、any、all函数用法分析
2015/04/21 Python
用Python编写简单的定时器的方法
2015/05/02 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python set内置函数的具体使用
2019/07/02 Python
详解python 中in 的 用法
2019/12/12 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
洗煤厂厂长岗位职责
2014/01/03 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
预备党员转正材料
2014/12/19 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
秋季运动会加油词
2015/07/18 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android