在学习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. java集成支付宝移动快捷支付时报错java.security.spec.InvalidKeySpecException: java.security.InvalidKeyException: IOException : algid parse error, not a sequence

    出错原因是代码中的私钥设置错误,不是填原始的私钥,而是转换为PKCS8格式的私钥(Java格式的) ,改成后就会报创建交易异常了

  2. Android 4.0关于开机启动服务

    针对使用App应用管理强制停止的App,重启系统后不能收到开机启动, 需要运行一次后,在下次再启动时,才可以正确收到.

  3. Oracle学习笔记(十三)

    十四.触发器(监听数据操作的工具) 1.什么是触发器? 数据库触发器是一个与表相关联的.存储的PL/SQL程序 作用: 每当一个特定的数据操作语句(insert.update.delete)在指定的表 ...

  4. android AlertDialog.Builder(Context context)换行

    今天无意中发现AlertDialog的 setMessage(String)的换行问题,很多人都说\n可以,不过的却原来就在java里面写好的是可以换行 ,但是如果这个string是在网页或者是其地方 ...

  5. EAS系统环境的搭建

    (一)应用服务器配置 1.先建立好程序需要部署的文件夹,如D:\AppServer\,此目录下包含如下几个子目录: XClient(客户端升级程序放置的目录,此目录下应包含Config和Files子目 ...

  6. 在Eclipse中卸载Team Explorer Everywhere

  7. [Erlang27]如何监控指定目录下的*.beam文件，如果有改动就更新到指定的节点?

    在Erlang In Anger第二章中讲到使用rebar来创建一个Erlang项目(Application或Project) 但美中不足的只是给出了指引,但没有给出详细的步骤. 下面我们就使用reb ...

  8. 在linux中使用包管理器安装node.js

    网上文章中,在linux下安装node.js都是使用源码编译,其实node的github上已经提供了各个系统下使用各自的包管理器(package manager)安装node.js的方法. 1. 在U ...

  9. 自己从0开始学习Unity的笔记 II （C#条件语句基础练习）

    首先,自己用了下三目表达式,来做了一个闰年的判断,也就是能被400整除,或者是能够被4整除,但是不能被100整除的年份. int year; //输入的年 bool fourHunderd; //能被 ...

  10. [.net]ConcurrentBag源码分析

    ConcurrentBag根据操作线程,对不同线程分配不同的队列进行数据操作.这样,每个队列只有一个线程在操作,不会发生并发问题.其内部实现运用了net4.0新加入的ThreadLocal线程本地存储 ...