复选框事件的处理

　　复选框本身也是多个组件的名字相同。所以在定义复选框的同事依然要使用document.all()取得全部的内容。

范例：操作复选框,要求是可以一个个去选择选项，也可以直接全选，全选按钮的状态根据选中的选项个数自动变化，即全选按钮的状态会自动取消或者自动勾选。

<!doctype html>

 <html lang = "zh-CN">

 <head>

     <meta charset="utf-8">

     <meta name="description" content="this is a checkbox example">

     <meta name="keywords" content="checkbox,html,js">

     <title>复选框的测试</title>

     <script type="text/javascript">

         window.onload = function () {

             //获取复选框元素

             var checkbox = document.all('checkbox');

             var checkall = document.getElementById('checkAll');

             /*点击全选按钮全部选中的情况*/

             checkall.addEventListener('click',function(){

                if (checkbox.length == undefined) {//一个选项时

                    checkbox.checked = checkall.checked;

                }else{

                     for (var i = 0; i < checkbox.length; i++) {//多个选项时

                         checkbox[i].checked = this.checked;

                     }

                }

             },false);

             //全部按钮什么时候被自动选中以及自动取消

             if (checkbox.length == undefined) {//一个选项时

                    checkbox.addEventListener('click',function(){

                        checkall.checked = checkbox.checked;

                    },false);

                }else{

                     for (var i = 0; i < checkbox.length; i++) {//多个选项时

                         checkbox[i].addEventListener('click',function(){

                            for (var i = 0; i < checkbox.length; i++){

                                if (!checkbox[i].checked) {

                                    checkall.checked = false; //全选自动取消

                                    break;

                                }else{

                                    if (i == checkbox.length -1) { checkall.checked = true;}; //全选自动勾选

                                }

                            }

                        },false);

                     }

            }    

             //打印您所有的选择

             document.getElementById('selecteBtn').addEventListener('click',function() {

                     /*一个个去选择时的情况*/

                     var yourchoose = "您选择的爱好有：";

                     if (checkbox.length == undefined) {//一个选项时

                         if (checkbox.checked) yourchoose = yourchoose + checkbox.value;

                     }else{

                         for (var i = 0; i < checkbox.length; i++) {//多个选项时

                             if (checkbox[i].checked) yourchoose = yourchoose + checkbox[i].value + "、";

                         };

                     }

                     alert(yourchoose);

                 },false);

         }

     </script>

 </head>

 <body>

     <form action="">

         您的爱好有:<br/>

         <input type="checkbox" name="checkbox" id="checkbox" value="电影">电影<br/>

         <input type="checkbox" name="checkbox" id="checkbox" value="音乐">音乐<br/>

         <input type="checkbox" name="checkbox" id="checkbox" value="看书">看书<br/>

         <input type="checkbox" name="checkbox" id="checkbox" value="打球">打球<br/>

         <input type="checkbox" name="checkbox" id="checkbox" value="爬山">爬山<br/>

         <input type="checkbox" name="checkbox" id="checkbox" value="游泳">游泳<br/>

         <input type="checkbox" name="checkAll" id="checkAll" value="以上全部">以上全部<br/>

         <input type="button" name="selecteBtn" id="selecteBtn" value="选择">

     </form>

 </body>

 </html>

效果截图如下：

默认状态时：　　　

没有全选时：

全选时：

JavaScript：复选框事件的处理的更多相关文章

  1. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  2. MUI - 复选框、单选框、使用js获取选择值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. 【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态

    0.页面中准备树的ul <ul id="treeDemo10" class="ztree" style="display: none;" ...

  4. ztree点击节点实现选中/取消复选框

    效果 代码 在js中初始化tree时 设置复选框操作只影响子节点 复选框事件,想怎么处理就怎么处理

  5. element-ui 复选框,实现点击表格当前行选中或取消

    背景: 1.表格结构绑定事件 <el-table v-loading="StepsListLoading" :data="StepsListData" b ...

  6. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

  7. vue2.0中ckeckbox(复选框)的使用心得，及对click事件和change的理解

    最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...

  8. javascript实现复选框的全选全不选

    通过复选框的id获取到复选框 元素 对复选框绑定点击事件 每个checkbox都设置相同的name checkOne 通过得到的元素获取checkbox的状态 当点击全选全不选checkbox时,检查 ...

  9. checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

随机推荐

  1. zabbix配置文件详解

    Zabbix之配置文件详解   zabbix配置文件种类: zabbix_server配置文件zabbix_server.conf zabbix_proxy配置文件zabbix_proxy.conf ...

  2. ps插件安装

    CutAndSliceMe.zxp 切图插件安装,下载后改为zip后缀,再解压后 复制文件夹到(PS软件安装目录)PhotoshopCC\Plug-ins\Panels文件夹下面

  3. 怎样将文件夹打包为jar包或war包

    在dos命令中,找到要打包文件夹位置,输入jar -cvf 打包后的名和格式 文件夹名 如图: 在我的文件夹的位置就能看到jar包和war包了

  4. 一个Java方法覆盖的小问题

    class SuperClass{ public SuperClass() { System.out.println("superclass "); show(); } publi ...

  5. [转]IE11下Forms身份认证无法保存Cookie的问题

    本文转自:http://www.cnblogs.com/jaxu/p/3698377.html ASP.NET中使用Forms身份认证常见的做法如下: 1. 网站根目录下的Web.config添加au ...

  6. Scrum会议5(Beta版本)

    组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...

  7. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

  8. Andrew Ng机器学习公开课笔记–Principal Components Analysis (PCA)

    网易公开课,第14, 15课 notes,10 之前谈到的factor analysis,用EM算法找到潜在的因子变量,以达到降维的目的 这里介绍的是另外一种降维的方法,Principal Compo ...

  9. 下面我会介绍几种轻轻松松访问Google的方法

    好人一生平安的大招 Google在大陆已经封了差不多有20天   访问是极其的困难 下面我会介绍几种轻轻松松访问Google的方法 首先 你需要个可靠的hosts  比如 https://git.os ...

  10. JsonCpp 简单使用

    [转]自: http://www.cnblogs.com/ytjjyy/archive/2012/04/17/2453348.html JsonCpp 是一个C++用来处理JSON 数据的开发包.下面 ...