今天做一个全选功能的时候用到了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. fastjson对接口参数的某个字段不打印输出，如文件的base64字符串

    fastjson对接口参数的某个字段不打印输出,如文件的base64字符串 package com.example.core.mydemo.json5; import com.alibaba.fast ...

  2. Json字符串转换处理html编码格式，= \u003d 处理

    Json字符串转换处理html编码格式,=  \u003d 处理 import com.alibaba.fastjson.annotation.JSONField; import com.faster ...

  3. 记一个，生产遇到的redission锁，释放问题：lock.tryLock(0, 0, TimeUnit.SECONDS)

    package com.aswatson.cdc.test; import org.redisson.Redisson; import org.redisson.api.RLock; import o ...

  4. uCos 学习：0-有关概念

    先说一下UCOSIII:Micrium在2009年推出了UCOSIII,相对于之前的UCOSII版本,在性能上有了进一步的提升,主要是支持时间片轮调度,极短的关中断事件等. 可剥夺多任务管理: 什么是 ...

  5. Ez Forensics详解

    Ez Forensics详解 题目要求: 数据库版本 + 字符集格式 + 最长列名 示例:NSSCTF 步骤: 解压压缩包得到forensics.vmdk,.vmdk是虚拟机磁盘文件的元数据文件 可以 ...

  6. 使用Terminal.Gui构建功能强大的.NET控制台应用

    前言 前段时间分享了一个库帮你轻松的创建漂亮的.NET控制台应用程序 - Spectre.Console的文章教程,然后就有小伙伴提问:.NET控制台应用需要应对强交互性的场景,有什么好的解决方案?, ...

  7. P2918

    [USACO08NOV]Buying Hay S 题意描述 约翰的干草库存已经告罄,他打算为奶牛们采购 H(1 \leq H \leq 50000)H(1≤H≤50000) 磅干草. 他知道 N(1 ...

  8. 机器学习策略篇：详解数据分布不匹配时，偏差与方差的分析（Bias and Variance with mismatched data distributions）

    详解数据分布不匹配时,偏差与方差的分析 估计学习算法的偏差和方差真的可以帮确定接下来应该优先做的方向,但是,当训练集来自和开发集.测试集不同分布时,分析偏差和方差的方式可能不一样,来看为什么. 继续用 ...

  9. 【数据集】Maple-IDS——网络安全恶意流量检测数据集

    一.数据集介绍 Maple-IDS数据集是一个网络入侵检测评估数据集,旨在增强异常基础入侵检测系统(IDS)和入侵预防系统(IPS)的性能和可靠性.随着网络空间安全领域攻击的日益复杂化,拥有一个可靠和 ...

  10. Vue3 之 reactive、ref、toRef、toRefs 使用与区别，源码分析详细注释

    目录 reactive.ref.toRef.toRefs 使用与区别 reactive ref 作用及用法 toRef 作用及用法 toRefs 作用及用法 ref,toRef,toRefs 源码实现 ...