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. Python快速学习05：面向对象

    系列文章:[传送门] Python对象是Python语言的核心部分.Python使用类(class)和对象(object),进行面向对象(object-oriented programming,简称O ...

  2. leetcode — plus-one

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Source : https://o ...

  3. shiro源码篇 - 疑问解答与系列总结，你值得拥有

    前言 开心一刻 小明的朋友骨折了,小明去他家里看他.他老婆很细心的为他换药,敷药,然后出去买菜.小明满脸羡慕地说:你特么真幸福啊,你老婆对你那么好!朋友哭得稀里哗啦的说:兄弟你别说了,我幸福个锤子,就 ...

  4. Jenkins入门之任务基本操作

    首先先简单讲一下Jenkins构建任务各种图标的含义 我的主界面有以下构建任务,这里前两列都是图标,第一列为构建的状态,前面已经讲过蓝色代表成功,红色代表失败.当然那是针对一次构建,一个构建任务可能有 ...

  5. Jenkins自动化构建配置

    写在前头 我每次修改代码一点东西,都要进行一个重新发布.重新发布的流程大概如下: 将最新代码同步上传到git上面 Maven打包 mvn clean install 将最新的jar包上传到服务器上面, ...

  6. Spring Cloud Stream消费失败后的处理策略（二）：自定义错误处理逻辑

    应用场景 上一篇<Spring Cloud Stream消费失败后的处理策略(一):自动重试>介绍了默认就会生效的消息重试功能.对于一些因环境原因.网络抖动等不稳定因素引发的问题可以起到比 ...

  7. HBase的java客户端测试(二)---DML操作

    测试准备 [首先同步时间:] for node in CloudDeskTop master01 master02 slave01 slave02 slave03;do ssh $node " ...

  8. word2vec初探

    在自然语言处理入门里我们提到了词向量的概念,tf-idf的概念,并且在实际的影评正负面预测项目中使用了tf-idf,取得了还算不错的效果.这一篇,我们来尝试一下使用来自google的大名鼎鼎的word ...

  9. 第一册:lesson seventy three.

    原文: The way to King Street. Last week Mrs. Mills went to London. She does not know London very well, ...

  10. win10 uwp 商业游戏 1.2.1

    上一个游戏已经告诉大家如何写多个游戏,现在继续写这个无聊的游戏 希望大家在看这篇文章之前先看win10 uwp 商业游戏,在这个文章告诉了大家如何创建游戏. 修改数值 可以从上一篇的博客的游戏看到升级 ...