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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
详谈javascript异步编程
Feb 21 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
Ant Design的Table组件去除
Oct 24 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
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
python去除字符串中的换行符
2017/10/11 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
荷兰手表网站:Watch2Day
2018/07/02 全球购物
电脑饰品店的创业计划书
2014/01/21 职场文书
体育教学随笔感言
2014/02/24 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
公司开业主持词
2015/07/02 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang