今天做一个全选功能的时候用到了jq 的attr 的方法，可是在真正使用的时候首次是可以实现全选和全不选的功能，然而

多点几次就会发勾选的效果消失了！先看下代码吧：

<!DOCTYPE html>

<html>

    <head >

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>jquery操作checkbox方法</title>

    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

    <script type="text/javascript" >

         //全选

         function selectAll() {

             //方法一：

             $("input[name='bjjb']").attr("checked",true);

             //方法二：

             /**$("input[name='bjjb']").each(function(){

                  $(this).attr("checked",true);

             });*/

             //获得checkbox的值和文本

              $("#checked").html("");

              $("#checkedText").html("");

              $("input[name='bjjb']:checked").each(function () {

                    $("#checked").append($(this).val()+",");

                    //注意文本一定要元素标签如span否则next得不到值

                    $("#checkedText").append($(this).next().text()+",");

              });

         }

         //取消全选

         function selectNone(){

             //方法一：

            $("input[name='bjjb']").removeAttr("checked");

            //方法二：

            /*$("input[name='bjjb']").each(function(){

                  $(this).attr("checked",false);

             });*/

              //获得checkbox的值和文本

              $("#checked").html("");

              $("#checkedText").html("");

              $("input[name='bjjb']:checked").each(function () {

                    $("#checked").append($(this).val()+",");

                    //注意文本一定要元素标签如span否则next得不到值

                    $("#checkedText").append($(this).next().text()+",");

              });

         }

         //反选

         function selectInvert() {

            $("input[name='bjjb']").each(function(index,item){

                 if ($(this).attr("checked")) {

                    $(this).removeAttr("checked");

                 } else {

                    $(this).attr("checked", true);

                }

            });

         }

     </script>

    </head>

    <body>

        <form  id="" action="" method="post">

            <div >

                <input type="checkbox" name="bjjb" value="1"/><span>選項一</span></br>

                <input type="checkbox" name="bjjb" value="2"/><span>選項二</span></br>

                <input type="checkbox" name="bjjb" value="3"/><span>選項三</span></br>

                <input type="checkbox" name="bjjb" value="4"/><span>選項四</span></br>

                <input type="checkbox" name="bjjb" value="5"/><span>選項五</span></br>

            </div>

            <div style="margin-top:10px;">

                <input type="button"   onclick="selectAll()"   value="全选" />

                <input type="button"   onclick="selectNone()"    value="全不选" />

                <input type="button"   onclick="selectInvert()"   value="反选" />

            </div>

            <div style="margin-top:10px;">

                选中项：<div id="checked"></div>

                选中文本：<div id="checkedText"></div>

            </div>

        </form>

  </body>

</html>

运行效果：

第一次（点击全选）：

第二次（点击全不选）：

第三次（再次点击全选）：

虽然点了但是没有勾选出现呀。果然有问题。

经过多方查证论坛大神表示：如果是html本身属性的话最好使用prop方法

经过查看jquery 1.8的文档也在举同样例子的时候用prop方法：

所以上面怎么改呢？

很简单：

只要将attr替换成prop就好啦。快去试试吧！！

解决 jquery attr多次使用失效的问题的更多相关文章

  1. 解决“Jquery的each里面return失效的问题”

    参考文章:http://blog.csdn.net/coffeesmile/article/details/53349860 问题描述: 集中获取页面的一些元素,然后用each循环处理这些元素,如果其 ...

  2. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  3. 使用jquery的load方法设计动态加载，并解决被加载页面JavaScript失效问题

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根 ...

  4. 转 mvc项目中,解决引用jquery文件后智能提示失效的办法

    mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法   这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常 ...

  5. 惊叹jQuery(解决jQuery对象到DOM的转换)

    jQuery是一个javascript框架,但绝对不是通常意义上的一些包装,个人感觉是一个改变js控制方式的框架.我们可以像美工通过写css分离页面代码一样,通过jQuery来分离页面与效果..下面转 ...

  6. 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...

  7. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  8. jQuery.attr() 函数详解

    一,jQuery.attr()  函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...

  9. jquery attr()方法 添加，修改，获取对象的属性值。

    jquery attr()方法 添加,修改,获取对象的属性值. jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到 ...

  10. 解决NGINX的WORDPRESS伪静态规则失效的问题

    解决NGINX的WORDPRESS伪静态规则失效的问题 前两天搬到了EMSVPS的PR线路上,用上了最新的WDCP2.0管理面板,支持多用户管理(我们几个合租的VPS,最需要这个功能了),感觉很不错, ...

随机推荐

  1. IDEA生成类和方法注释模板详细说明 绝对好用

    吐槽 今天心血来潮,将使用了很久的IDEA旗舰版卸载了,想换社区版用一段时间,毕竟社区版开源免费.精简不卡顿,如果够用的话以后就省去了破解的烦恼,而且可以紧跟官网使用最新版 旧的IDEA配置忘记保存了 ...

  2. re.search()用法详解

    re.search() 是 Python 的正则表达式库 re 中的一个方法,用于在字符串中搜索与正则表达式模式匹配的第一个位置,并返回一个匹配对象.如果没有找到匹配项,则返回 None. 以下是 r ...

  3. FEDORA34 安装CUDA11.3

    FEDORA34 安装CUDA11.3 首先确保能装上最新的显卡驱动.  FEDORA显卡驱动安装 然后去官网下fedora对应的.run安装文件.运行安装, 但不要选装驱动. 完成后加环境变量: # ...

  4. QT学习：00 介绍

    --- title: framework-cpp-qt-00-介绍 date: 2020-04-08 15:41:54 categories: tags: - c/c++ - qt --- 章节描述: ...

  5. CentOS7源码安装Python3

    一.先安装python3所依赖的软件包,非常重要(否则可能会出现python3安装成功,却缺少相应的pip) [root@centos src]# yum groupinstall "Dev ...

  6. Spark3学习【基于Java】1. Spark-Sql入门程序

    spark-sql是用来处理结构化数据的模块,是入门spark的首要模块. 技术的学习无非就是去了解它的API,但是Spark有点难,因为它的例子和网上能搜到的基本都是Scala写的.我们这里使用Ja ...

  7. Netcode for Entities里如何对Ghost进行可见性筛选（1.2.3版本）

    一行代码省流:SystemAPI.GetSingleton() 当你需要按照区域.距离或者场景对Ghost进行筛选的时候,Netcode for Entities里并没有类似FishNet那样方便的过 ...

  8. 如何去除字符串中的 "\n" ？80% 的同学错了！

    大家好,我是鱼皮,今天分享一个小知识. 我最近负责的工作是设计一个 SQL 解析引擎.简单来说,就是将一个 SQL 表达式字符串,解析为一颗对象树,从而执行查询等一系列操作. 在最开始,我就遇到了一个 ...

  9. [rCore学习笔记 08]内核第一条指令

    了解QEMU 启动指令 qemu-system-riscv64 \ -machine virt \ -nographic \ -bios ../bootloader/rustsbi-qemu.bin ...

  10. JAVA私有构造函数---java笔记

    在Java中,构造函数是一种特殊的方法,它用于初始化新创建的对象.当我们创建一个类的实例时,构造函数会自动被调用. 构造函数可以有不同的访问修饰符,如public.protected.default( ...