功能

实现分为两大部分：

第一body 部分，1，通过<li>无序列表标签实现选项的基本样式，通过input的checkbox标签实现里面的复选框功能。用到了标签的嵌套。然后选项的js方法含有选中和被选中的功能。

2，button按钮部分，通过<button>标签，里面绑定onclick事件，来触发选项标签的函数功能。

第二，script部分。通过for循环，逐个遍历选项卡的各个checkd的状态，checkd= "checked"是选中状态，checkd =true“是选中状态，checkd = false 是未被选中状态。checkd = ”checkd"是默认选中状态。那么我们就可以通过改变input标签的checkd的状态是true还是false进而确定 是不是选中状态。对于反选，需要定义函数，遍历访问各个标签，如果checkd

为true，则让它为false。

代码；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var kuang =document.getElementsByTagName("input");
    var anniu = document.getElementsByTagName("button");
    function select(status) {
        for (i=0;i<kuang.length;i++){
//   实现 全选 的功能，遍历，将每一个都选中.通过传递参数，checked属性的真假，true为选中，false为选错
            kuang[i].checked = status
        }
    }
    function selectReverse() {
        for (var i =0 ; i <7;i++){
            if (kuang[i].checked){kuang[i].checked =false;}
            else {kuang[i].checked = true;}
        }
    }

</script>

<ul style="margin: 50px 30px 20px">

    <li ><input type="checkbox" >政治</li>
    <li ><input type="checkbox">英语</li>
    <li ><input type="checkbox">数学</li>
    <li ><input type="checkbox" >历史</li>
    <li ><input type="checkbox">语文</li>
    <li ><input type="checkbox" >地理</li>
    <li ><input type="checkbox" >化学</li>

</ul>
<button type="button"  onclick="select(true)">全选</button>
<button type="button"  onclick="select(false)">全不选</button>
<button type="button"  onclick="selectReverse()" >反选</button>

</body>
</html>

需求，如图 所示，实现右边的全选，全不选，反选

python练习题之全选框全不选反选的更多相关文章

  1. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  2. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  3. Jquery表格变色 复选框全选，反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

  4. 复选框全选、全不选和反选的效果实现VIEW:1592

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  7. toFixed（）精度丢失；复选框全选、取消

    一.精度丢失和重写toFixed()函数 1.重写toFixed() Number.prototype.toFixed = function(length){ var carry = 0; //存放进 ...

  8. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  9. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  10. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

随机推荐

  1. SqlServer 事物

    Ø 事务 在数据库中有时候需要把多个步骤的指令当作一个整体来运行,这个整体要么全部成功,要么全部失败,这就需要用到事务. 1. 事务的特点 事务有若干条T-SQL指令组成,并且所有的指令昨晚一个整体提 ...

  2. Altium Designer chapter1总结

    第一章操作基础中有以下几点需要注意: (1)随着DSP.ARM.FPGA等高速逻辑元件的应用,PCB的信号完整性与抗干扰性能显得尤为重要. (2)Altium Designer的发展史:Protel ...

  3. ECG 项目预研

    1. 数据的采集 智能安全帽,流数据,鉴于数据量大,应该是采集到云平台上,然后在云平台上对数据处理,是一种典型的物联网+大数据应用场景,考虑使用AWS或者阿里云,然后搭建Hadoop/Spark 环境 ...

  4. tensorflow学习框架(炼数成金网络版学习记录)

    chapter1 #变量 import tensorflow as tf x = tf.Variable([1,2]) a = tf.constant([3,3]) #增加一个减法op sub = t ...

  5. 基于Annotation的IOC 初始化

    从Spring2.0 以后的版本中,Spring 也引入了基于注解(Annotation)方式的配置,注解(Annotation)是JDK1.5 中引入的一个新特性,用于简化Bean 的配置,可以取代 ...

  6. 在Lua中进行运算符重载

    在C++里面运算符是可以重载的,这一点也是C++比较方便的一个地方.在Lua中其实也是可以模拟出运算符的重载的. 在Lua中table中元素的运算都是和一个叫做元表有关的,在一个table型的变量上都 ...

  7. 并行开发 1.Parallel

    原文:8天玩转并行开发——第一天 Parallel的使用 随着多核时代的到来,并行开发越来越展示出它的强大威力,像我们这样的码农再也不用过多的关注底层线程的实现和手工控制, 要了解并行开发,需要先了解 ...

  8. HR面试总结

    求职面试HR最欣赏的自我介绍 2015-02-25 来源:www.cnrencai.com 浏览:391   明明很有能力的你,在面试中却不能发挥出色?来看看是不是自我介绍环节出了问题. 回答面试题目 ...

  9. Java中的关键字--volatile

    volatile关键字经常用来修饰变量.不过,volatile本身很容易被误用.本篇就介绍一下volatile的原理和使用方式. 在介绍volatile关键字原理前,我们首先要了解JVM运行时的内存分 ...

  10. React（7） --react父子组件传参

    react父子组件传参 父级向子级传参:在父组件中,我们引入子组件,通过给子组件添加属性,来起到传参的作用,子组件可以通过props获取父组件传过来的参数. 在父组件中: import React f ...