1、需求分析

可同时选中多个选项，实现全选、全不选、反选等功能。

2、技术分析

基础的HTML、CSS、JavaScript。

3、详细分析

3.1 HTML部分

图示是一个列表加底部一段文字说明，列表包含三个部分，整体是一个多选列表，上部是总的选项，下面是具体选项，因此该列表是一个自定义列表：

<body>

    <dl class="checkBox">

        <dt><input type="checkbox" id="checkAll">

            <label>全选</label>

            /*给"反选"建立js链接，实现动态效果*/

            <a href="javascript:;">反选</a>

        </dt>

        <dd>

            /*选项由选择框(输入框)和标示构成，所以使用<input>标签和<label>标签,label 元素不会呈现任何特殊效果。如果在 label 元素内点击文本，就会触发此控件*/

            <p><input type="checkbox" name="item"><label>选项1</label></p>

            <p><input type="checkbox" name="item"><label>选项2</label></p>

            <p><input type="checkbox" name="item"><label>选项3</label></p>

            <p><input type="checkbox" name="item"><label>选项4</label></p>

            <p><input type="checkbox" name="item"><label>选项5</label></p>

            <p><input type="checkbox" name="item"><label>选项6</label></p>

            <p><input type="checkbox" name="item"><label>选项7</label></p>

            <p><input type="checkbox" name="item"><label>选项8</label></p>

        </dd>

    </dl>

    <center>1、切换全选全不选文字2、根据选中个数更新全选框状态</center>

</body>

3.2 CSS部分

<style type="text/css">

/*浏览器格式化，消除页面预留空间*/

    *{

        margin: 0;

        padding: 0;

       }

        /*适应各种浏览器屏幕尺寸*/

    body{

        width: 100%;

        height: 100%;

        /*设置页面字体大小*/

        font-size: 14px;

        }

    /*列表内元素垂直居中*/

    label,input,a{vertical-align:middle;}

    /*给选项表示设置内边距*/

    label{padding:0 10px 0 5px;}

    /*给列表设置边框*/

    dl{

         width: 120px;

         /*元素水平居中*/

         margin: 10px auto;

         border: 1px solid #666;

         /*设置边框圆角*/

         border-radius: 5px;

         background: #fafafa;

         padding: 10px 5px;

        }

    /*消除链接下划线，设置链接字体颜色*/

    a{

         text-decoration: none;

         color: #09f;

        }

    /*鼠标指针浮动在链接上时，样式改变:字体变红色*/

    a:hover{

         color: red;

        }

    dt{

         /*下边框*/

         border-bottom: 1px solid black;

         /*距离底部内边距*/

         padding-bottom: 10px;

        }

        /*标示字体加粗*/

    dt label{

         font-weight: 700;

        }

        /*各个选项距离顶部外边距*/

    p{

         margin-top: 10px;

        }
</style>

3.3 JS部分

<script type="text/javascript">

    window.onload=function(){//网页加载完成后调用函数

        var oA=document.getElementsByTagName("a")[0];//获取第一个a元素，即链接"反选"

        var oInput=document.getElementsByTagName("input");//获取所有的输入选择框

        var oLabel=document.getElementsByTagName("label")[0];//获取第一个lable标签，lable标签为input标签定义标记，即"全选"选项。

        var isCheckAll=function( ){//声明一个全选函数

              for(var i=1,n=0;i<oInput.length;i++){//从i=1循环，排除第一个选项"全选“，从选项1开始循环。

                    oInput[i].checked && n++//没选择一个选项，则n增加1，n=已选的项目数

                }

                    oInput[0].checked=n==oInput.length-1;//选择第一个选项=选择第一个项目之外的全部选项，所以点击全选的同时，其他所有选项一并选中。

                    oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"//innerHtml改变第一个标签"全选'的元素内容，后面为判断语句：选择"全选"时，全选变为全不选，

否则为全选。

            };

            oInput[0].onclick=function(){//给第一个选项"全选"绑定点击函数事件,点击全选时，执行函数

                  for(var i=1;i<oInput.length;i++){

                    oInput[i].checked=this.checked//当点击第一个"全选"选项时，执行循环函数:遍历选择每个选项，即点击全选时，所有选项都选择，实现全选，同理实现全不选，

这里的this即为oInput[0]，将第一个input的checked值赋给每一个input元素。

                }

                isCheckAll()

            };

            oA.onclick=function(){//给"反选"绑定点击事件，当点击反选时，执行相应函数事件

                for (var i = 1; i < oInput.length; i++){

                    oInput[i].checked=!oInput[i].checked//点击反选，已选变未选，未选变已选，!为否定

                };

            }

                for (var i = 1; i < oInput.length; i++) {//点击改变元素

                    oInput[i].onclick=function(){

                        isCheckAll()//oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"，根据选中个数更新全选框状态，当全选后，全选切换为全不选。

                    };

                }

            }

</<script>

复选框（checkbox）、多选框的更多相关文章

  1. 复选框(checkbox)、单选框（radiobox）的使用

    复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...

  2. jquery实现radio按纽全不选和checkbox全选的实例

    用jquery实现以下两个这个功能: 1.对所有单选按纽中radio全不选 单选按纽:<input type="radio" name="f1">A ...

  3. angular 复选框checkBox多选的应用

    应用场景是这样的,后台返回的数据在页面上复选框的形式repeat出来 可能会有两种需求: 第一:后台返回的只有项,而没有默认选中状态(全是待选状态) 这种情况相对简单只要repeat出相应选项 第二: ...

  4. layui 复选框checkbox 全选写法

    前语:本来我是不想写layui框架的博客的,有的时候数据经过layui渲染后原生的写法就取不到值了,一定要用它框架的写法,实在蛋疼,故写之,以后用到可以省点时间去度娘! HTML: <div i ...

  5. （七）对话框，单选框(radiobox)，复选框(checkbox)，列表框(ListBox)，组合框(CComboBox)，水平滚动条(Horizontal scroll bar)，微调(旋转)spincontrol，列表视图控件CListCtrl，静态控件static

    1,模态对话框和非模态对话框 // 模态对话框 void CMainFrame::OnDialogExec() { // TODO: 在此添加命令处理程序代码 // 创建对话框对象 CDialog d ...

  6. html 复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐

    对 input与label同时设置CSS input,label{ vertical-align:middle; }

  7. 自定义多选框(checkbox)和单选框(radio)css样式

    直接上代码: input[type="radio"],input[type="checkbox"]{ -webkit-appearance: none; out ...

  8. 吾八哥学Selenium(三)：操作复选框checkbox/单选框radio的方法

    复选框checkbox和单选框radio是web网站里经常会使用到的两个控件,那么在web自动化测试的时候如何利用Selenium来操作这俩控件呢?今天我们就来简单入门练习一下! html测试页面代码 ...

  9. css3美化复选框checkbox

     两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...

  10. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

随机推荐

  1. angularjs 使用angular-sortable-view实现拖拽效果（包括拖动完成后的方法使用）

    首先还是看效果图吧,方便大家可以快速得知是否是自己需要的功能:(抱歉电脑还未安装动图软件,先用.png) 如果上图是你需要的功能效果图,那么请往下看,我有写出来例子哦~ 使用这个插件有几个好处,首先: ...

  2. js 为对象添加和删除属性

    对于一个普通的js对象: var obj = { name:"mary", age:21 } 如果我们要对它添加新属性的话可以使用下列方式: obj.address = " ...

  3. 牛客练习赛43F（推式子）

    要点 题目链接 1e18的数据无法\(O(n)\)的容斥,于是推式子,官解,其中式子有点小错误 不必预处理mu,直接按照素数的个数判断正负即可 #include <bits/stdc++.h&g ...

  4. 同源策略与CORS跨域请求

    一.同源策略 1.简介 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源 ...

  5. flush logs时做的操作

    flush logs时做的操作:  对于一般查询日志和慢日志,先关闭文件再打开  对于binlog,关闭当前的,开始用下一个新的  用错误日志文件的话,先关闭再打开flush logs可以对一般查询日 ...

  6. 【ACM】拦截导弹 - 0-1背包问题

    拦截导弹 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 某国为了防御敌国的导弹袭击,发展中一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到 ...

  7. python入门之random模块

    #!/usr/bin/env python #_*_encoding: utf-8_*_ import random print(random.random()) #生成一个在0到1之间的随机浮点数 ...

  8. Windows QT 商业版 试用

    You're about to evaluate Qt Enterprise - the cross-platform application and UI framework used to dev ...

  9. LeetCode 101 Symmetric Tree 判断一颗二叉树是否是镜像二叉树

    Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center).For ex ...

  10. 程序代码里出现illegal character '\ufeff' 和 expected class or object definition的解决办法（图文详解）

    不多说,直接上干货! 问题详情 问题分析    可能原因导致1:你的程序也许,是在他人那里复制而来,会导致这样的问题. 可能原因导致2:由于页面编码造成的.  可能原因导致1的解决办法 这个,好比,我 ...