前端设计之复选框与反选

在一些表单,以及许多注册登录时都会用到此类的选择框,

首先、其中运用到了window.onload = function(){};

其次、运用到onclick 点击事件;

那么就来看一下如何编写的吧!

这里写图片描述

<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <script>

            window.onload = function(){
                selAll = document.getElementById("selAll");
                hobbys = document.getElementsByName("hobby");
                fx = document.getElementById("fx");

                //全选事件
                selAll.onclick = function(){
                    //全选
                    if(selAll.checked == true){
                        for (var i=0;itrue;
                        }
                    }else{
                        for (var i=0;ifalse;
                        }
                    }
                }


                //反选
                fx.onclick = function(){

                    for (var i=0;ivar b = hobbys[i];


                            if(b.checked == true){
                                b.checked = false;
                            }else{
                                b.checked = true;
                            }
                        }
                }

            }



        script>
    head>
    <body>
        <input type="checkbox" name="" id="selAll" />全选
        <button id="fx">反选button>
        <br>
        <input type="checkbox" name="hobby" />篮球
        <input type="checkbox" name="hobby" />足球
        <input type="checkbox" name="hobby" />乒乓球
        <input type="checkbox" name="hobby" />羽毛球
    body>
html>

你可能感兴趣的:(前端)