关于如何用js完成全选反选框等内容

在学习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完成全选反选框等内容的更多相关文章

js实现全选,反选,全不选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
js实现全选反选功能
开始慢慢地学习js&jQuery. function clicked(){ var arr=document.getElementsByName("product"); f ...
js实现全选反选（开关门）
话不多说直接看图吧
JavaScript Web API 全选反选案例
全选反选全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...
JS实现全选、反选、不选
JS实现全选.反选.不选效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
js和jq实现全选反选
在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...
elementUI+JS实现全选与反选
在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...
JS实现简单的多选选项的全选反选按钮
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <!-- 5 需求: 6 1.写三个按钮: ...
jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

随机推荐

Java总结篇系列：Java泛型
一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: 1 public class GenericTest { 2 3 public static void main(Stri ...
MIT 6&period;828 JOS学习笔记6&period; Appendix 1&colon; 实模式(real mode)与保护模式(protected mode)
在我们阅读boot loader代码时,遇到了两个非常重要的概念,实模式(real mode)和保护模式(protected mode). 首先我们要知道这两种模式都是CPU的工作模式,实模式是早期C ...
【更新】【封装必备】封装辅助 - 清理&amp&semi;优化工具 For Win7（IT天空会员专版）
https://www.itsk.com/thread-353560-1-4.html nqawen 发表于 2015-7-9 17:26:37 本帖最后由 Amz 于 2015-11-25 10 ...
（转）SqlServer将数据库中的表复制到另一个数据库
本文为转载地址为:http://jingyan.baidu.com/article/d5c4b52bc5c102da570dc547.html 复制表结构在使用SqlServer的过程中,我们可能需 ...
Iis load balance
http://www.agilesharp.com/u/yanyangtian/Blog.aspx/t-196 IIS负载均衡-Application Request Route详解第二篇:创建与配 ...
局域网yum服务器创建
yum createrepo createrepo dir 配置httpd发布yum-repo; 在客户端添加yum.rep配置文件;
L2TP
点击查看详情>> 我的贡献 |退出 L2TP 编辑词条 L2TP是一种工业标准的Internet隧道协议,功能大致和PPTP协议类似,比如同样可以对网络数据流进行加密.不过也有不同之处 ...
POJ 2391&period;Ombrophobic Bovines （最大流）
实际上是求最短的避雨时间. 首先将每个点拆成两个,一个连接源点,一个连接汇点,连接源点的点的容量为当前单的奶牛数,连接汇点的点为能容纳的奶牛数. floyd求任意两点互相到达的最短时间,二分最长时间, ...
CI框架中遇见的一些错误和解决方法笔记
ps:根据经验不断修改和更新,欢迎指出错误~ 1. An uncaught Exception was encountered Type: Exception Message: Session: Co ...
C&num;开启异步线程的四种方式
一.异步委托开启线程public static void Main(string[] args){ Action<int,int> a=add; a.BeginInvoke(3,4,nul ...