复选框事件的处理

　　复选框本身也是多个组件的名字相同。所以在定义复选框的同事依然要使用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. JS中定义类的方法

    JS中定义类的方式有很多种: 1.工厂方式    function Car(){     var ocar = new Object;     ocar.color = "blue" ...

  2. java.lang.String 类的所有方法

    java.lang.String 类的所有方法 方法摘要 char charAt(int index) 返回指定索引处的 char 值. int codePointAt(int index) 返回指定 ...

  3. nova help network-create

    chen@controller:~$ nova help network-create usage: nova network-create [--fixed-range-v4 <x.x.x.x ...

  4. linux网卡设置详解

    centos7安装之后是需要在网卡配置文件中开始网络连接 onboot =yes 刚开始时网卡获取IP模式是dhcp 你会发现ifconfig不能用,猜测是废弃了,你要yum install net- ...

  5. Antialiasing with Transparency

    Antialiasing with Transparency This sample demonstrates the GeForce 7 Series per-primitive super-sam ...

  6. 详解在bash脚本中如何获取自身路径

    DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )" 这是stac ...

  7. NEC学习 ---- 布局 -两列， 右侧定宽，左侧自适应

    该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及. 上篇中介绍了左侧定宽,右侧自适应的布局, ...

  8. oracle 多表查询

    1.注意点 在查询过程中,不确定数据库表中的数据量,先查询数据量,数据量较大,则不能直接查询(select * from emp),如果数据量较大,直接查询容易造成死机或者数据读取较慢,如果较小可以查 ...

  9. Solr 连接数据库

    实际工程应用中,从数据库导出数据创建索引再常见不过了,现在实验一下从数据库导入数据创建索引. 一.版本说明 Solr版本:4.7.0 数据库:sqlserver2005 二.配置步骤 1.  准备的j ...

  10. LR中获取当前系统时间方法

    方法一:使用loadrunner的参数化获取当前时间使用lr的参数化,非常方便,对lr熟悉的各位朋友也能马上上手,时间格式也有很多,可以自由选择.步骤:1.将复制给aa的值参数化2.选中abc,使用右 ...