全选全不选

界面：

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script type="text/javascript" src="jquery-3.3.1.js"></script>
  6. </head>
  7. <body>
  8.     <input type="checkbox" id="checkall" />全选/全不选
  9.     <br/>
  10.     <input type="checkbox" name="items" value="足球"/>足球
  11.     <input type="checkbox" name="items" value="篮球" />篮球
  12.     <input type="checkbox" name="items" value="游泳" />游泳
  13.     <input type="checkbox" name="items" value="唱歌" />唱歌
  14.     <input type="checkbox" name="items" value="读书" />读书
  15.     <br/>
  16.     <input type="button" id="checkall_1" value="全选"/>
  17.     <input type="button" id="checkno" value="全不选"/>
  18.     <input type="button" id="checkarev" value="反选"/>
  19.     <input type="button" id="send" value="提交"/>
  20.     <script type="text/javascript">
  21.     //全选全不选
  22.     $(document).ready(function(){
  23.         $("#checkall").click(function(){
  24.             if (($("#checkall").prop("checked"))){
  25.             $(":input[name='items']").attr("checked",true);
  26.             }else{
  27.             $(":input[name='items']").attr("checked",false);
  28.             }
  29.         });
  30.     });
  31.     //全选
  32.     $(document).ready(function(){
  33.         $("#checkall_1").click(function(){
  34.             $(":input[name='items']").attr("checked",true);
  35.         });
  36.     });
  37.     //全不选
  38.     $(document).ready(function(){
  39.         $("#checkno").click(function(){
  40.         //方式一
  41.             $(":input[name='items']").attr("checked",false);
  42.         //方式二
  43.             // $("input[name='checkbox']").removeAttr("checked");
  44.         });
  45.     });
  46.     //反选
  47.     $(document).ready(function(){
  48.         $("#checkarev").click(function(){
  49.         $("input[name='items']").each(function(){
  50.         //attr
  51.         //1.attr("checked"):返回被选中元素的属性值
  52.         //2.attr("checked",true)：设置选中属性
  53.             if (this.checked) {
  54.                 $(this).prop("checked",false);
  55.             }else{
  56.                 $(this).prop("checked",true);
  57.             }
  58.             });
  59.         });
  60.     });
  61.     </script>
  62. </body>
  63. </html>

【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]的更多相关文章

  1. Jquery重新学习之二[属性attr(),removeAttr(),prop(),removeProp()]

    1:属性.attr(name|pro|key,val|key,fn)与removeAttr(name) 1.1 .attr(name) 参数name为属性名称 <a id="my_hr ...

  2. jquery操作属性 attr()和 prop()兼容性问题

    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...

  3. 查找索引/ie滤镜/动态背景/属性attr和prop

    1. 查找索引 查找当前元素在指定范围内的索引序号,示例: $('.right_newestState_con').find('em').index($(this)); 2. ie滤镜 利用ie的私有 ...

  4. jQuery元素属性attr设置多个键值或函数 删除属性removeAttr

    $("Element").attr(name) '取得第一个匹配的属性值,比如$("img").attr("src") $("El ...

  5. jQuery知识点：attr与prop的区别

    做项目时遇到个莫名的问题,全选的时候仅第一次有效,再次点击全选按钮是无效了,查了查原因,看到篇很不错的文章,问题出在jquery中的attr属性上,这里做下笔记. 原文链接:http://www.cn ...

  6. jquery中attr和prop的区别—判断复选框选中状态

    最近项目中需要用jquery判断input里checkbox是否被选中,发现用attr()获取不到复选框改变后的状态,最后查资料发现jQuery 1.6以后新增加了prop()方法,借用官方的一段描述 ...

  7. 【jQuery 区别】attr()和prop()的区别

    1>>> 今天实现一个 点击更新按钮 ,可以勾选上本行的的checkbox的功能: 使用代码: /** * updateproduct.htmls 更新 产品信息 */ $(docu ...

  8. jQuery中的attr()和prop()使用

    总结:除了checked.seleted这样的属性推荐用prop()外,其他的随意都可以. 原因如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...

  9. jquery中的attr与prop的区别,什么时候用attr,什么时候用prop

    只要有 Boolean() 属性的,简单说就是具有true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),(其实这些都是表单类的), ...

随机推荐

  1. 怎么在Centos7 下让我的mariadb开机启动？（已解决)

    以前我经常使用syscemctl工具在开机后执行 systemctl start mariadb (哈哈,打得可6,只是有点儿麻烦), 如果能开机自启动mariadb就好了. 所以,我想百度下看什么命 ...

  2. 20175320 2018-2019-2 《Java程序设计》第3周学习总结

    20175320 2018-2019-2 <Java程序设计>第3周学习总结 教材学习内容总结 本周学习了教材的第四章的内容.在这章中介绍了面向对象编程的概念以及Java编程中的类与对象, ...

  3. ASP.NET Core 实现跨站登录重定向的新姿势

    作为 .NET 程序员,痛苦之一是自从 ASP.NET 诞生之日起直到最新的 ASP.NET Core 都无法直接实现跨站登录重定向(比如访问 https://q.cnblogs.com ,跳转到 h ...

  4. 【RabbitMQ】工作模式介绍

    一.前言 之前,笔者写过< CentOS 7.2 安装 RabbitMQ> 这篇文章,今天整理一下 RabbitMQ 相关的笔记便于以后复习. 二.模式介绍 在 RabbitMQ 官网上提 ...

  5. 25.75k8s

    扣子helm上传dm需要在  local下执行  helm repo index helm list --tls  (加上--tls才可以)

  6. Vue滑动删除与修改

    Vu+element实现 <template> <div class=""> <div class="slider"> &l ...

  7. st2_057

    http://vulapps.evalbug.com/s_struts2_s2-057/ 这大概是全网复现st2-057环境最简单的操作了. 不过首先,你需要安装过docker,安装方法参考官方文档h ...

  8. nc linux命令详解

    NetCat,在网络工具中有“瑞士军刀”美誉,其有Windows和Linux的版本.因为它短小精悍(1.84版本也不过25k,旧版本或缩减版甚至更小).功能实用,被设计为一个简单.可靠的网络工具,可通 ...

  9. Scala 偏函数

    如果你想定义一个函数,而让它只接受和处理其参数定义域范围内的子集,对于这个参数范围外的参数则抛出异常,这样的函数就是偏函数(顾名思异就是这个函数只处理传入来的部分参数). 偏函数是个特质其的类型为Pa ...

  10. [openjudge-搜索]城堡问题(The Castle)

    题目描述 描述 图1是一个城堡的地形图.请你编写一个程序,计算城堡一共有多少房间,最大的房间有多大.城堡被分割成mn(m≤50,n≤50)个方块,每个方块可以有0~4面墙. 输入 程序从标准输入设备 ...