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 js cookie的存储,获取和删除
Dec 29 Javascript
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
如何使用原生Js实现随机点名详解
Jan 06 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
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
javascript 伪数组实现方法
2010/10/11 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
Python定时执行之Timer用法示例
2015/05/27 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python内存管理实例分析
2019/07/10 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
Django实现文件上传下载
2019/10/06 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
铲车司机岗位职责
2014/03/15 职场文书
商场主管竞聘书
2014/03/31 职场文书
明星员工获奖感言
2014/08/14 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
基层党支部整改方案
2014/10/25 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang