zoukankan      html  css  js  c++  java
  • js checkbox的全选 反选

    <!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>
        <title></title>
        <script type="text/javascript">
            //全选方法
            function f1() {
                var inputs = document.getElementsByTagName("input");
                var cheAll = event.srcElement;
                for (var i = 0; i < inputs.length; i++) {
                    if (inputs[i].id != "cheRev") {
                        inputs[i].checked = cheAll.checked;
                    }
                }
            }
            //反选方法
            function f2() {
                var inputs = document.getElementsByTagName("input");
                //每一个checkbox取反
                for (var i = 0; i < inputs.length; i++) {
                    if (inputs[i].id != "checkAll" && inputs[i].id != "cheRev") {
                        inputs[i].checked = !inputs[i].checked;
                    }
                }
                //如果此时全部选中,也要将全选取反,反之亦然
                isCheckedAll();
            }
            //为每一个非全选的checkbox添加点击事件
            window.onload = function () {
                var inputs = document.getElementsByTagName("input");
                for (var i = 0; i < inputs.length; i++) {
                    if (inputs[i].id != "checkAll" && inputs[i].id != "cheRev") {
                        inputs[i].onclick = isCheckedAll;
                    }
                }
            }
            //判断此时是否是全选,如果是则勾上全选按钮,如果不是,则取消勾取全选按钮。
            function isCheckedAll() {
                var inputs = document.getElementsByTagName("input");
                //假设全都被选中
                var isChecked = true;
                for (var j = 0; j < inputs.length; j++) {
                    if (inputs[j].id != "checkAll" && inputs[j].id != "cheRev") {
                        if (!inputs[j].checked) {
                            isChecked = false;
                            break;
                        }
                    }
                }
                var checkAll = document.getElementById("checkAll");
                checkAll.checked = isChecked;
            }
        </script>
    </head>
    <body>
        <input id="checkAll" type="checkbox" onclick="f1()" value="" />全选 <input id="cheRev" type="button" value="反选" onclick="f2()" /><br/>
        <input id="one" type="checkbox" name=""  />吃饭<br />
        <input id="two" type="checkbox" name="" />睡觉<br />
        <input id="three" type="checkbox" name="" />打豆豆<br />
    </body>
    </html>
  • 相关阅读:
    【机器学习】算法原理详细推导与实现(一):线性回归
    《0~3岁孩子的 正面管教》——备忘
    马歇尔·卢森堡《非暴力沟通》——备忘
    李笑来《财富自由之路》——备忘
    select、poll、epoll之间的区别总结[整理]
    堆和栈区别
    Linux 文件系统剖析
    Inside The C++ Object Model(五)
    Inside The C++ Object Model(四)
    Inside The C++ Object Model(三)
  • 原文地址:https://www.cnblogs.com/nianlee/p/2965049.html
Copyright © 2011-2022 走看看