在学习js过程中按照视频写了这个页面

可以在点上面全选/全不选时全部选中或者取消

在单击下面的单选框时上面的全选会根据下面的单选框进行相应的调整

功能比较完善

以下是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选练习</title>
    <script>
        window.onload = function () {
            var items = document.getElementsByName( "items");
            var checkedALLBtn = document.getElementById("checkedAllBtn")
            checkedALLBtn.onclick =  function () {
                for (var i=0;i<items.length;i++){
                    items[i].checked=true;
                }
                checkedAllBox.checked=true;
            }
            var checkedNoBtn = document.getElementById("checkedNoBtn")
            checkedNoBtn.onclick =  function () {
                for (var i=0;i<items.length;i++){
                    items[i].checked=false;
                }
                checkedAllBox.checked=false;

            }
            var checkedRevBtn = document.getElementById("checkedRevBtn")
            checkedRevBtn.onclick =  function () {
                checkedAllBox.checked=true;
                for (var i=0;i<items.length;i++){
                    items[i].checked=!items[i].checked;
                    if(!items[i].checked){
                        checkedAllBox.checked=false;
                    }
                }

            }
            var checkedAllBox = document.getElementById("checkedAllBox");
            checkedAllBox.onclick =  function () {
                for (var i=0;i<items.length;i++){
                    items[i].checked=checkedAllBox.checked;
                }
            }
            for (var i=0;i<items.length;i++){
                items[i].onclick = function () {
                    checkedAllBox.checked=true;
                    for (var j=0;j<items.length;j++){
                        if(!items[j].checked){
                            checkedAllBox.checked=false;
                            break;
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
<form method="post" action="">
    你爱好的运动是 <input type="checkbox" id="checkedAllBox">全选/全不选
    <br>
    <input type="checkbox" name="items" value="足球">足球
    <input type="checkbox" name="items" value="蓝球">蓝球
    <input type="checkbox" name="items" value="羽毛球">羽毛球
    <input type="checkbox" name="items" value="乒乓球">乒乓球
    <br>
    <input type="button" id="checkedAllBtn" value="全选">
    <input type="button" id="checkedNoBtn" value="全不选">
    <input type="button" id="checkedRevBtn" value="反选">
    <input type="button" id="sendBtn" value="提交">
</form>
</body>
</html>

关于如何用js完成全选反选框等内容的更多相关文章

  1. js实现全选,反选,全不选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

  2. js实现全选反选功能

    开始慢慢地学习js&jQuery. function clicked(){ var arr=document.getElementsByName("product"); f ...

  3. js实现全选反选（开关门）

    话不多说直接看图吧

  4. JavaScript Web API 全选反选案例

    全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...

  5. JS实现全选、反选、不选

    JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  6. js和jq实现全选反选

    在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...

  7. elementUI+JS实现全选与反选

    在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...

  8. JS实现简单的多选选项的全选反选按钮

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <!-- 5 需求: 6 1.写三个按钮: ...

  9. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

随机推荐

  1. Zookeeper基本使用（转）

    一.Zookeeper架构 云计算越来越流行的今天,单一机器处理能力已经不能满足我们的需求,不得不采用大量的服务集群.服务集群对外提供服务的过程中,有很多的配置需要随时更新,服务间需要协调工作,这些信 ...

  2. UVa 11136 Hoax or what （STL）

    题意:有 n 天,每天有m个数,开始的前一天没有数据,然后每天从这个里面拿出一个最大的和最小的,求 n 天的最大的和最小的差值相加. 析:一看就知道用set啊,多简单的STL,不过要注意,开long ...

  3. CLOB 和 BLOB

    An SQL CLOB is a built-in type that stores a Character Large Object as a column value in a row of a ...

  4. Linux 基础教程 40-df和du命令

    df     df用于显示文件系统的整体磁盘使用量. 基本用法 df [选项] [目录/文件] 其常用选项如下所示: 选项 说明 -a, --all 显示所有文件系统,包括/proc等虚拟文件系统 - ...

  5. php autoload 笔记

    php auotload 实现了类的延迟加载机制,需要的时候在include,平时很少用到.它的实现原理搜了一下如下(不是本人研究的结果): 检查执行器全局变量函数指针autoload_func是否为 ...

  6. 初尝2D骨骼动画编辑工具SPINE，并into Unity3D

    一.SPINE使用 研究2D骨骼动画,CYou的朋友介绍我SPINE这个工具,开发自Esoteric Software的一款专门制作2D动画的软件,网络上的资料还很少,我这从半吊子美术技术的角度简单说 ...

  7. Android-封装JSON数据（JSON对象/JSON数组）

    Android-封装JSON数据(JSON对象/JSON数组),一般情况下不会在Android端封装JSON的数据,因为封装JSON的数据是在服务器端进行封装了,Android更多的工作是解析(JSO ...

  8. DateUtils常用方法

    一.DateUtils常用方法   1.1.常用的日期判断 isSameDay(final Date date1, final Date date2):判断两个时间是否是同一天: isSameInst ...

  9. php的循环与引用的一个坑

    上代码 $arr = array( 'a'=> 'a11', 'b'=> 'b22', 'c'=> 'c33', ); foreach ($arr as $k=>&$v ...

  10. 使用dockerfile文件创建镜像时docker build没有反应

    问题: 先 docker pull centos:7 拉取了一个官方的基础镜像,为后续创建jdk8镜像做准备,在创建如下的dockerfile文件 执行docker build -t jdk_8u19 ...