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. leetcode — edit-distance

    /** * Source : https://oj.leetcode.com/problems/edit-distance/ * * * Given two words word1 and word2 ...

  2. 32位汇编第五讲,逆向实战干货,(OD)快速定位扫雷内存.

    32位第五讲,逆向实战干货,快速定位扫雷内存. 首先,在逆向之前,大家先对OD有一个认识. 一丶OD的使用 标号1: 反汇编窗口 (显示代码的地址,二进制指令,汇编代码,注释) 标号2: 寄存器窗口( ...

  3. （转）解决 TortoiseGit 诡异的 Bad file number 问题

    此问题,请不要使用 rebase, 下载最新的 TortoiseGit 即可: TortoiseGit-2.3中文版与Git安装包_手册: http://download.csdn.net/detai ...

  4. 基于vue技术的企业移动办公系统的设计与实现

    如何打包: http://www.cnblogs.com/smilehuanxiao/p/7693858.html http://www.cnblogs.com/1314y/p/6207153.htm ...

  5. docker常用命令2

    Docker作为一种开源的.优秀的容器化技术,目前受到越来越多公司的运用,下面是我工作中常用到的一些命令. 1.删除一个容器(删除之前先要停止该容器) docker stop 容器IDdocker r ...

  6. 配置 FATFS 支持长文件名

    FATFS 版本:Nov 09 14 R0.10c 在 FATFS 已经移植好的基础上,首先打开 ffconf.h 配置文件,找到如下图配置项: 可以将此值从 0 改为 1 使用 static wor ...

  7. Django 系列博客（六）

    Django 系列博客(六) 前言 本篇博客介绍 Django 中的路由控制部分,一个网络请求首先到达的就是路由这部分,经过路由与视图层的映射关系再执行相应的代码逻辑并将结果返回给客户端. Djang ...

  8. C#文件操作。

    文件操作常用相关类: File: 操作文件,静态类,对文件整体操作. Directory:操作目录(文件夹),静态类. FileInfo:文件类,用来描述一个文件对象,获取指定目录下的所有文件时,返回 ...

  9. DOM入门。

    DOM  Document Object Model  文档对象模型,dom就是HTML页面的模型,将每个标签都作为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框,层 ...

  10. C#操作DbConnection类

    一.常用属性 名称 说明 ConnectionString 获取或设置用于打开数据库的字符串.(重写 DbConnection.ConnectionString) ConnectionTimeout ...