在学习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. kaggle-泰坦尼克号Titanic-1

    大家都熟悉的『Jack and Rose』的故事,豪华游艇倒了,大家都惊恐逃生,可是救生艇的数量有限,无法人人都有,副船长发话了『lady and kid first!』,所以是否获救其实并非随机,而 ...

  2. Objective-C 学习笔记(一) 语言程序结构

    Objective-C语言程序结构 “Hello World”简单示例 #import <Foundation/Foundation.h> //预处理命令,它告诉Objective-C语言 ...

  3. [Erlang24]使用zotonic搭建网站记录

    zotonic的搭建网站(blog)记录:   zotonic:用Erlang做的一个web 框架:   和wordpress 类似,但是官网称比PHP CMS要快10倍以上   先看看我的成果:正弦 ...

  4. solr-4.10.2版本使用tomcat7部署

    当前版本仅限于solr-4.10.2版本.默认环境使用的是jdk1.7,tomcat7.环境自己配置.网上一堆堆的. 1.下载相应的文件(solr-4.10.2.zip). 官网地址:http://l ...

  5. you need to be root to perform this command

    在linux 终端执行某条命令时 提示一下错误 you need to be root to perform this command 是提示要获取root权限 输入su 回车输入密码 即可解决 参考 ...

  6. （zxing.net）二维码Data Matrix的简介、实现与解码

    一.简介 Data Matrix 二维条码原名Datacode,由美国国际资料公司(International Data Matrix, 简称ID Matrix)于1989年发明.Data-Matri ...

  7. 关于My Sql update语句不能用子查询的解决办法

    在使用My Sql数据库语法操作update时,第一时间想到的是一下写法: UPDATE purchase_request_detail SET convert_to_voucher_id=, con ...

  8. Rx.net 例子——（1）基础

    1.订阅序列 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  9. Android中Textview显示Html，图文混排，支持图片点击放大

    本文首发于网易云社区 对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛 ...

  10. mysql--对库,表基本操作语句,增删改查

    1.对数据库的操作 1.选择数据库 USE 数据库名 2.创建数据库 create database 数据库名 charset utf8; 可以由字母.数字.下划线.@.#.＄ 区分大小写 唯一性 不 ...