js实现复选框全选/全不选/反选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>js实现复选框全选/全不选/反选</title>
    <script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //反选
        function toggle() {
            //得到所有标签名为input的元素
            var y = document.getElementsByTagName("input");
            alert(y.length);
            //循环出每个元素
            for(var i = 0; i < y.length; i++) {
                //如果元素的类型为checkbox,就反选
                if(y[i].type == "checkbox") {
                    y[i].checked = !y[i].checked;
                }
            }
        }

        //全选
        function selAll() {
            //得到所有标签名为input的元素
            var y = document.getElementsByTagName("input");
            alert(y.length);
            //循环出每个元素
            for(var i = 0; i < y.length; i++) {
                //如果元素的类型为checkbox,就全选
                if(y[i].type == "checkbox") {
                    y[i].checked = true;
                }
            }
        }

        //全不选
        function noselAll() {
            //得到所有标签名为input的元素
            var y = document.getElementsByTagName("input");
            alert(y.length);
            //循环出每个元素
            for(var i = 0; i < y.length; i++) {
                //如果元素的类型为checkbox,就全不选
                if(y[i].type == "checkbox") {
                    y[i].checked = false;
                }
            }
        }
    </script>
</head>

<body>
    <form>
        爱好：
        <input type="checkbox" value="读书" />读书
        <input type="checkbox" value="唱歌" />唱歌
        <input type="checkbox" value="跳舞" />跳舞
        <input type="checkbox" value="聊天" />聊天
        <input type="checkbox" value="看电影" />看电影
        <input type="button" value="全选" onclick="selAll();" />
        <input type="button" value="全不选" onclick="noselAll();" />
        <input type="button" value="反选" onclick="toggle();" />
    </form>
</body>

    </html>
js实现复选框全选/全不选/反选

js实现复选框全选/全不选/反选

猜你喜欢
