在学习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. nodejs顺序执行shell

    最近工作中需要用到nodejs编写脚本来顺序执行自动化测试用例,编写代码如下: var runCommand = function (command){ child_process.exec(comm ...

  2. Web Api 中返回JSON的正确做法（转）

    出处:http://www.cnblogs.com/acles/archive/2013/06/21/3147667.html 在使用Web Api的时候,有时候只想返回JSON:实现这一功能有多种方 ...

  3. Redis是可以安装成windows服务-开机自启 win7 64位

    其实Redis是可以安装成windows服务的,开机自启动,命令如下: redis-server --service-install redis.windows.conf 安装完之后,就可看到Redi ...

  4. [转]Newtonsoft.Json 序列化和反序列化 时间格式

    本文转自:http://www.cnblogs.com/litian/p/3870975.html 1.JSON序列化 string JsonStr= JsonConvert.SerializeObj ...

  5. oracle 索引的分类

    1. B树索引(默认索引,保存讲过排序过的索引列和对应的rowid值) 1)说明: 1.oracle中最常用的索引:B树索引就是一颗二叉树:叶子节点(双向链表)包含索引列和指向表中每个匹配行的ROWI ...

  6. Linux系统的运行级的概念

    Linux OS 将操作 环境分为以下7个等级,即 0:关机 1:单用户模式(单用户.无网络) 2:无网络支持的多用户模式(多用户.无网络) 3:有网络支持的多用户模式(多用户.有网络) 4:保留,未 ...

  7. [LeetCode 题解]: Rotate List

    Given a list, rotate the list to the right by k places, where k is non-negative. For example:Given 1 ...

  8. MSP430 G2553 LaunchPad设置GPIO

    一. 背景知识:逻辑运算符的使用 当程序初始化时,对于复位状态有不确定性的寄存器(如PxOUT),建议采用直接赋值:其他情况下最好使用逻辑运算符修改寄存器. 直接赋值 REGISTER = 0b111 ...

  9. UWP开发入门（五）——自定义Panel

    各位好,终于讲到自定义Panel了.当系统自带的几个Panel比如Gird,StackPanel,RelativePanel不能满足我们的特定要求时(其实不常见啦),自定义Panel就显得非常必要,而 ...

  10. 【Oracle 12c】最新CUUG OCP-071考试题库（60题）

    60.(16-10) choose the best answer: Evaluate the following SQL commands: SQL>CREATE SEQUENCE ord_s ...