<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <label for="checkedAllBox">你爱好的运动是？</label><input type="checkbox" id="checkedAllBox"/>全选/全不选
    <br/>
<!--定义了复选框type="checkbox". 用户需要从若干给定的选择中选取一个或若干选项。-->
    <label>
        <input type="checkbox" name="items" value="足球"/>
        足球
    </label>
    <label>
        <input type="checkbox" name="items" value="蓝球"/>
        蓝球
    </label>
    <label>
        <input type="checkbox" name="items" value="羽毛球"/>
        羽毛球
    </label>
    <label>
        <input type="checkbox" name="items" value="乒乓球"/>
        乒乓球
    </label>
    <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>
<script>
    function myClick1(idStr,fun){
        //全选/全不选框的地址
        var checkedAllBox=document.getElementsByName("checkedAllBox");
        // 全选按钮：点击按钮之后，四个多选框全都被选中
        const btn=document.getElementById(idStr);
        btn.onclick=fun;
    }
    // 全选框
        myClick1("checkedAllBtn",function () {
            var items=document.getElementsByName("items");
            //items为一个数组，需要遍历
            for(let i=0;i<items.length;i++){
                //设置四个多选框变成选中状态
                //通过多选框的checked属性获取或设置多选框的选中状态
                items[i].checked=true;
            }
            checkedAllBox.checked=true;
        });
        // 全不选按钮：点击之后，四个多选框全都不被选中
        myClick1("checkedNoBtn",function () {
            var items = document.getElementsByName("items");
            for(let i=0;i<items.length;i++){
                items[i].checked=false;
            }
            checkedAllBox.checked=false;
        });
    // 反选：点击之后选中的变成没选中，没选中的选中
    myClick1("checkedRevBtn",function () {
var items=document.getElementsByName("items")
        for(let i=0;i<items.length;i++){
          /*  if(items[i].checked===false){
                items[i].checked=true;
            }
            else{
                items[i].checked=false;
            }*/
            //反选时也需要判断四个多选框是否全部选中
          items[i].checked=!items[i].checked;
            checkedAllBox.checked=true;
            //判断四个多选框是否全选,只要有一个没选中就不是全选
            for(let j=0;j<items.length;j++) {
                if (!items[j].checked) {
                    // 一旦进入判断，则证明不是全选状态
                    // 将checkedAllBox设置为没选中
                    checkedAllBox.checked = false;
                }
            }
        }
       /* checkedAllBox.checked=true;
        for(let j=0;j<items.length;j++){
            //判断四个多选框是否全选,只要有一个没选中就不是全选
            if(!items[j].checked){
                // 一旦进入判断，则证明不是全选状态
                //    将checkedAllBox设置为没选中
                checkedAllBox.checked=false;
                break;
            }
        }*/
    });
    // 提交按钮:点击之后所有多选框的value属性值弹出
    myClick1("sendBtn",function () {
var items=document.getElementsByName("items");
for(let i=0;i<items.length;i++){
    if(items[i].checked===true){
        alert(items[i].value)}}
    });
    //全选中或全不选中
    myClick1("checkedAllBox",function () {
        var items=document.getElementsByName("items");
for(let i=0;i<items.length;i++){
   // items[i].checked=checkedAllBox.checked;
    items[i].checked=this.checked;
}
    });
/*如果四个多选框全都选中，则checkAllBox也应该选中
    如果四个多选框全都不选中，则checkAllBox也应该不选中*/
//为四个多选框分别绑定点击响应函数
    var items=document.getElementsByName("items");
    for(let i=0;i<items.length;i++){
        items[i].onclick=function () {
            checkedAllBox.checked=true;
            for(let j=0;j<items.length;j++){
                //判断四个多选框是否全选,只要有一个没选中就不是全选
                if(!items[j].checked){
                    // 一旦进入判断，则证明不是全选状态
                //    将checkedAllBox设置为没选中
                    checkedAllBox.checked=false;
                    break;
                }
            }
        }
    }
</script>

JS实例-全选练习的更多相关文章

  1. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

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

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

  3. 第十六篇 JS实现全选操作

    JS实现全选   嗨,同学们好,老师这里是专门教同学解决一些针对性的问题,所以说综合起来,就要靠同学自己了. 这节课我们学一个很实用的东西,全选操作!比如淘宝这种商城对吧,我的购物车,我要全选购买,或 ...

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

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

  5. JS实现全选功能

    000. 开始 学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现. 全选功能是在很多注册页面.获取用户兴趣爱好.让用户勾选一些选项等页面中常见的一种效果,主要有全 ...

  6. 一个js编写全选、弹出对话框、ajax-json的案例

    js功能有:全选.弹出对话框.使用json传输ajax数据:不想在写多余的文字了,直接上代码: <%@ page language="java" contentType=&q ...

  7. jquery与js实现全选功能的区别---2017-05-12

    一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...

  8. php处理表单中的复选框问题以及js实现全选

    做的一个项目中遇到了全选和取消全选的问题,这是一个很普遍的功能,,虽然我们经常用到,但是真正做起来却发现行不通,在网上找了些,大部分都是ie,但是谷歌内核浏览器不能正常实现,所以经过小小的调整,今天就 ...

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

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

随机推荐

  1. HDOJ 1051. Wooden Sticks

    题目 There is a pile of n wooden sticks. The length and weight of each stick are known in advance. The ...

  2. javascript原型：写一个合并后数组去掉同类项的方法

    <!DOCTYPE html> <html> <head> <title>test013_Array_prototype_unique()</ti ...

  3. 你闺女也能看懂的插画版 Kubernetes 指南

    Matt Butcher是Deis的平台架构师,热爱哲学,咖啡和精雕细琢的代码.有一天女儿走进书房问他什么是Kubernetes,于是就有了这本插画版的Kubernetes指南,讲述了勇敢的Phipp ...

  4. 高效C++：资源管理

    C++中资源泄漏一直都是老大难的问题,特别是在嵌入式环境中,一点点的资源泄漏,加上长时间的运行们就会导致程序崩溃,这种问题定位非常困难,无规律偶发.解决问题的一种方式是使用特定工具检查内存泄漏,优点是 ...

  5. ajax提交表单，包括跳入的坑！

    本来今天上午写了一个js执行上下文的一个了解.但是写一大半的时候出去有事,电脑关了啥都没了. 还是让我们进入正题 ajax提交表单,很简单,原生js的代码太复杂,我们就jq的去写. 创建html文件, ...

  6. 如何查看预收录在arXiv上论文的LaTeX源文件并编译

    arXiv 是一个收集物理学.数学.计算机科学与生物学论文预印本的网站. 对于理科生来说,经常需要在上面搜索下载一些论文,正常情况下,一般人下载的只是 pdf 文件,其实可以在 arXiv 上下载编译 ...

  7. AttributeError: module 'time' has no attribute 'clock'

    在python3.8中flask项目运行报错: AttributeError: module 'time' has no attribute 'clock'解决方案 主要原因是因为python3.8中 ...

  8. matplotlib基础汇总_02

    设置plot的风格和样式 点和线的样式 颜色 参数color或c 五种定义颜色值的方式 别名 color='r' 合法的HTML颜色名 color = 'red' HTML十六进制字符串 color ...

  9. 网络滴神，TCP！

     TCP在网络协议(网络协议见这篇文章)中的重要性就相当于女朋友对于程序员的重要一样,这么说你应该知道有多重要了吧. 1. 三次握手 TCP在进行数据的传输之前必须先建立连接,建立之后才能进行数据的传 ...

  10. Python编程第四版中文 上下册完整版pdf|网盘下载附提取码

    点击此处下载 提取码:drjh 作者简介 Mark Lutz是Python培训的世界的领先者,他是最初和最畅销的Python著作的作者,从1992年起就是Python社区的先锋人物.Mark有25年的 ...