JQuery全选反选第二次失效解决办法

本文主要为大家带来一篇解决jquery全选/反选第二次失效的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了。

原代码大致结构关键如下:

function selectAll(obj){    $('input[name="xxx[]"]').attr("checked",obj.checked);}全选子框子框子框子框

登录后复制

步骤一:尝试正面刚一波:

function selectAll(obj){   if(obj.checked) {    $('input[name="xxx[]"]').attr("checked", true);   } else {    $('input[name="xxx[]"]').removeAttr("checked");   }}

登录后复制

卒—–完全没有效果,弃之。

步骤二:快速上网搜索一番,发现这个问题比较常见,在遇到过这个问题的人里,我应该排在千里之外了。点开几个看了,基本都是说用prop替代attr便能解决,奈何如下:

JQuery全选反选第二次失效解决办法

然而项目上用的版本低于1.6并被告知最好不要更改版本,同弃之。

步骤三:无可奈何,JQuery弃之…尝试改用原生js写法,代码如下:

function selectAll(obj){ var xxx = document.getElementsByName("xxx[]");  if(obj.checked) {   for(var i = 0;i < xxx.length;i++) {    xxx[i].checked = true;   }  } else {   for(var i = 0;i < xxx.length;i++) {    xxx[i].checked = false;   }  }}

登录后复制

测试一下,顺利解决。其实也算是个小问题,不过给了我一些启示,不能局限在一个框里,多换个角度思考问题,往往能更好地去解决问题。

相关推荐:

分享jquery全选反选实例

jquery全选/全不选/反选另一种实现方法(配合原生js)_jquery

jquery全选checkBox功能实现代码(取消全选功能)_jquery

以上就是JQuery全选反选第二次失效解决办法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2788935.html

(0)
上一篇 2025年3月8日 18:33:33
下一篇 2025年3月6日 23:53:34

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • jQuery的Promise如何正确使用

    关于jquery的promise的使用方法,大家了解多少?本文就主要和大家分享jquery的promise如何正确使用,希望能帮助到大家。 先前了解了ES6的Promise对象,来看看jQuery中的Promise,也就是jQuery的De…

    2025年3月8日
    200
  • jquery鼠标悬停导航下划线滑出实例分享

    本文主要为大家详细介绍了jquery鼠标悬停导航下划线滑出效果,菜单鼠标悬停出现下划线,向两边扩展的效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 本文实例为大家分享了jquery鼠标悬停导航下划线滑出效果的具体…

    编程技术 2025年3月8日
    200
  • jquery实现PC端轮播图代码

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面项目里既然已经用到了jquery,那就索性用jquery写一个轮播图吧。本文主要给大家讲述了用jquery如何写出一个pc端的轮播图效果的实例,有兴趣的朋友参考下。 现在把自己写的轮…

    2025年3月8日
    200
  • jQuery子元素过滤选择器如何使用

    本文主要为大家详细介绍了jquery选择器之子元素过滤选择器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。           Untitled Document             p, span, …

    编程技术 2025年3月8日
    200
  • JS和jQuery注册信息的验证功能实现代码

    用js和jquery实现注册信息的验证功能的效果是一样的。本文通过实例代码给大家分享了基于js+jquery实现的注册信息验证功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助到大家。 HTML代码  请填写注册…

    编程技术 2025年3月8日
    200
  • jQuery使用zTree插件实现可拖拽的树代码分享

    在目前接触到的树插件中,我觉得ztree比较简单,也容易上手。有一次业务需求是将某对象分组树上的对象可以随意拖拽,相当于改变了对象的分组,因此我用到了ztree,对其进行了一些列学习。 本文主要介绍js使用zTree插件实现可拖拽的树示例,…

    2025年3月8日
    200
  • jquery代码实现鼠标点击文字特效

    今天在【幻想’s blog】看到一段比较喜欢的鼠标点击文字特效js代码,本文主要和大家介绍一个有意思的鼠标点击文字特效jquery代码,需要的朋友可以参考下,希望能帮助到大家。 只需将如下JS代码放到 以上就是jquery代码实…

    2025年3月8日
    200
  • 关于jQuery用$.ajax或$.getJSON实现跨域获取JSON数据的代码

    通过jquery可以跨域获取json数据,但必须弄清楚的是,jquery不可以跨域获取任意json格式的数据,必须要通过服务端输出特定的针对jquery跨域读取的json数据。你可能目前对此仍然毫无了解,没关系,本文将以最简单易懂的方式介绍…

    编程技术 2025年3月8日
    200
  • html和jquery/js引用外部图片时出现403的问题如何解决

    本文主要和大家分享解决html-jquery/js引用外部图片时遇到看不了或出现403的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 解决方法如下所示: function showI…

    编程技术 2025年3月8日
    200
  • vue引入stylus及报错如何解决

    本文主要和大家介绍vue中引入stylus及报错解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 前提条件是已经有了vue项目,如果没有,请先建立 安装stylus 好了,建立好项目后…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论