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 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
js对象的比较
Feb 26 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
简单实现js页面切换功能
Jan 10 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 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获取MAC地址的具体实例
2013/12/13 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
Python备份Mysql脚本
2008/08/11 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
django数据库自动重连的方法实例
2019/07/21 Python
基于python实现查询ip地址来源
2020/06/02 Python
python实现学生成绩测评系统
2020/06/22 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
UNIX文件系统常用命令
2012/05/25 面试题
英文求职信结束语大全
2013/10/26 职场文书
男方父母证婚词
2014/01/12 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
经济管理专业求职信
2014/06/09 职场文书
绿色校园广播稿
2014/10/13 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
JS封装cavans多种滤镜组件
2022/02/15 Javascript
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL