功能

实现分为两大部分：

第一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。

代码；

  1. <!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;}
            }
        }
  2.  
  3. </script>
  4.  
  5. <ul style="margin: 50px 30px 20px">
  6.  
  7.     <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>
  8.  
  9. </ul>
    <button type="button"  onclick="select(true)">全选</button>
    <button type="button"  onclick="select(false)">全不选</button>
    <button type="button"  onclick="selectReverse()" >反选</button>
  10.  
  11. </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. hdu6575Budget

    Problem Description Avin’s company has many ongoing projects with different budgets. His company rec ...

  2. 2019/10/27 TZOJ

    1001 Gaussian Prime http://www.tzcoder.cn/acmhome/problemdetail.do?&method=showdetail&id=379 ...

  3. 使用Atom写你的笔记

    使用Atom写你的笔记 本文参考简书笔记. 使用sync-settings同步你的Atom设置 使用sync-settings插件需要以下3个条件: 电脑已安装Atom Atom内已安装sync-se ...

  4. 诊断：MRP0: Background Media Recovery process shutdown with error ORA-19909

    oracle12c data guard,从库无法应用日志,检查alert日至发现 2019-10-21T14:55:40.087819+08:00 MRP0: Background Media Re ...

  5. quartz CronExpression

    一.Quartz Cron 表达式支持到七个域 名称 是否必须 允许值 特殊字符 秒 是 0-59 , - * / 分 是 0-59 , - * / 时 是 0-23 , - * / 日 是 1-31 ...

  6. Vue的入门之安装

    vue.js是前端框架中比较热门的,因为工作关系,也加入了浩浩荡荡的学习大潮中,用笔记记录下点滴,便于后面学习查阅! 1 node.js环境的安装包(npm包管理器) 2 vue-cli 脚手架构建工 ...

  7. 【洛谷p1025】数的划分

    数的划分[传送门] 算法的话,dfs+剪枝: 据说是01年之前的NOIp提高组: 思路: 这道题是求把n无序的划分成k份的方案数,最直接的搜索方法是依次枚举x1,x2……xk的值,然后判断,显然这么搜 ...

  8. Tensorflow机器学习入门——MINIST数据集识别

    参考网站:http://www.tensorfly.cn/tfdoc/tutorials/mnist_beginners.html #自动下载并加载数据 from tensorflow.example ...

  9. Pull Request的正确打开方式（如何在GitHub上贡献开源项目）

    Pull Request的正确打开方式(如何在GitHub上贡献开源项目) GitHub的官方帮助如下: Fork A Repo: https://help.github.com/articles/f ...

  10. 【学习总结】cpu缓存

    参考链接: cpu缓存java性能问题初探 高速缓存 在内存与cpu寄存器之间,还有一块区域叫做cpu高速缓存,即我们常常说的cache. cache分为L1.L2.L3三级缓存,速度递减,离cpu越 ...