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. LearnOpenGL学习笔记（五）——纹理

    在设计物体表面时,很多时候我们不满足于一种颜色或者几种简单颜色,我们希望是丰富多彩的图案,或者说我们提供给它的图片.这样一个顶点一个顶点的去指定那是行不通了,我们不可能把所有顶点用数字去表达出来,必须 ...

  2. Python中的可变、不可变对象和赋值技巧序列解包

    可变对象和不可变对象 在python中一切皆对象.在Python中不存在所谓的值传递调用,一切传递都是对象的引用,也可认为是传址. python中,对象分为可变(mutable)和不可变(immuta ...

  3. golang的字符串拼接

    常用拼接方法 字符串拼接在日常开发中是很常见的需求,目前有两种普遍做法: 一种是直接用 += 来拼接 s1 := "Hello" s2 := "World" s ...

  4. webapi接口发布出错 OwinStartupAttribute

    解决办法:在 webconfig 中 <appSettings> <add key="owin:AutomaticAppStartup" value=" ...

  5. 将汉字转化为拼音的js插件

    /*---------------------------------------------------------------- // 文件名:chinese2pinyin.js // 文件功能描 ...

  6. Field 'id' doesn't have a default value错误解决方法

    Field 'id' doesn't have a default value 错误提示. 主键类型获取方式为"native"由数据库生成指定. 检查发现数据库中已存在Employ ...

  7. mapper代理方式开发

    使用mapper代理方式开发: 需要编写mapper接口,UserMapper.java需要编写映射文件,UserMapper.xml需要遵循一些开发规范,mybatis便可以自动生成mapper接口 ...

  8. 详解javascript事件绑定使用方法

    由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所 ...

  9. angular 分页插件的使用

    html: <pagination total-items="totalItems" ng-model="currentPage" items-per-p ...

  10. express 对数据库数据增删改查

    接着 http://www.cnblogs.com/cynthia-wuqian/p/6560548.html (1)概念 Schema(属性) :一种以文件形式存储的数 据库模型骨架,不具备数据库的 ...