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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
JS变量提升及函数提升实例解析
Sep 03 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 获取select下拉列表框的值
2010/05/08 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
PHP的几个常用数字判断函数代码
2012/04/24 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
vue的for循环使用方法
2019/02/12 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
学生操行评语大全
2014/04/24 职场文书
环保倡议书100字
2014/05/15 职场文书
高中同学会活动方案
2014/08/14 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫