js实现复选框的全选、全不选和反选

主要是用遍历的方法查找元素，然后通过改变checked的属性来选择，为true则是选中状态，为false则是未选状态

实现代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>复选框的选择</title>

     <style>

         #btn{

             margin: 5px auto;

         }

         #btn>input{

             font-size: 16px;

             color: #fff;

             background-color: rgb(110, 34, 182);

             outline: none;

         }

         #city{

             background-color: aqua;

         }

     </style>

     <script>

         window.onload=function(){

             var obt1 = document.getElementById('btn1');

             var obt2 = document.getElementById('btn2');

             var obt3 = document.getElementById('btn3');

             var ocity = document.getElementById('city');

             var oinput = ocity.getElementsByTagName('input');

             obt1.onclick=function(){

                 for(var i=0;i<oinput.length;i++)

                 {

                     oinput[i].checked=true;

                 }

             }

             obt2.onclick=function(){

                 for(var i=0;i<oinput.length;i++)

                 {

                     oinput[i].checked=false;

                 }

             }

             obt3.onclick=function(){

                 for(var i=0;i<oinput.length;i++)

                 {

                     if(oinput[i].checked==false)

                     {

                         oinput[i].checked=true;

                     }else{

                         oinput[i].checked=false;

                     }

                 }

             }

         }

     </script>

 </head>

 <body>

     <div id="btn">

         <input type="button" id="btn1" value="全选">

         <input type="button" id="btn2" value="全不选">

         <input type="button" id="btn3" value="反选">

     </div>

     <div id="city">

         <input type="checkbox">北京<br>

         <input type="checkbox">上海<br>

         <input type="checkbox">广州<br>

         <input type="checkbox">深圳<br>

         <input type="checkbox">武汉<br>

     </div>

 </body>

 </html>

　　结果

　　

js实现复选框的全选、全不选和反选的更多相关文章

  1. 复选框（checkbox）、多选框

    1.需求分析 可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析 基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明,列 ...

  2. Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据

    原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...

  3. jQuery对复选框（checkbox)的全选，全不选，反选等的操作

    效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...

  4. jQuery实现checkbox（复选框）选中、全选反选代码

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  5. 复选框（checkox）全选、全不选、反选、获得选中项值的用例

    HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...

  6. 组合框里添加复选框的方法（使用勾选的假象，用图片代替而已，并非QT原生支持）

    组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...

  7. checkbox 多选框 ：jquery之全选、全不选、反选

    javascriptjqueryselectAll [html] view plaincopy   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  8. 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面

    <%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...

  9. checkbox复选框，如何让其勾选时触发一个事件，取消勾选时不触发

    <input type="checkbox" onclick="checkboxOnclick(this)" /> <script> f ...

  10. 复选框全选、反选及根据值JS控制复选框默认选中事件

    HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...

随机推荐

  1. 微信小程序跳转小程序

    <navigator target="miniProgram" open-type="navigate" app-id="{{BappId}}& ...

  2. JVM读书笔记之垃圾收集与内存分配

    1 概述 说起垃圾收集( Garbage Collection , GC ) ,大部分人都把这项技术当做 Java 语言的伴生产物.事实上, GC 的历史远远比 Java 久远,1960 年诞生于 M ...

  3. 翻译：insert on duplicate key update(已提交到MariaDB官方手册)

    本文为mariadb官方手册:INSERT ON DUPLICATE KEY UPDATE的译文. 原文:https://mariadb.com/kb/en/insert-on-duplicate-k ...

  4. Hyperledger Fabric链码之二

    上篇文章中我们介绍了链码的概念,本文中我们将介绍Fabric下链码的编写和测试.我们会通过一个简单例子的方式来阐述链码API的使用. 链码API     每一个链码程序都必须实现一个接口Chainco ...

  5. 华为路由器 HDLC 实验

    HDLC 简介 高级数据链路控制(High-Level Data Link Control 或简称 HDLC),是一个在同步网上传输 数据.面向比特的数据链路层协议,它是由国际标准化组织(ISO)根据 ...

  6. golang包管理解决之道——go modules初探

    golang的包管理是一直是为人诟病之处,从golang1.5引入的vendor机制,到准官方工具dep,目前为止还没一个简便的解决方案. 不过现在go modules随着golang1.11的发布而 ...

  7. 第一册：lesson twenty-one.

    原文:Which book? A:Give me a book please,B. B:Which book? This one? A:No,not that one. The red one. B: ...

  8. 快速搭建一个Quartz定时任务【转载，好文 ，值得收藏，亲身试用 效果不错】

    Quartz.NET 入门 概述 Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允许开发人员根据时间间隔 ...

  9. ASP.NET Core 中使用EF Core 将实体映射到数据库表的方法（SQL Server）

    前段时间听过一个关于使用ASP.NET Core建立项目的视频.其中使用EF Core映射到数据库的部分是按部就班地学习.今天自己建立项目时,有些步骤已经有一些遗忘.所以写下这篇文章,顺便理清思路. ...

  10. [Linux] PHP-FPM开启慢日志记录

    fpm:FastCGI Process Manager 是一种替代的PHP FastCGI实现,对于负载较重的站点非常有用. .先进的进程控制,优雅的停止启动 .能够使用不同的uid/gid/chro ...