Jack's Notes12——全选、全不选、反选(循环遍历给按钮动态注册事件)

最新推荐文章于 2022-05-07 20:29:45 发布

kuangjian007

最新推荐文章于 2022-05-07 20:29:45 发布

阅读量1.4k

点赞数

分类专栏：基础 JavaScript 文章标签： input function xhtml button html

本文链接：https://blog.csdn.net/kuangjian007/article/details/7742228

版权

基础同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 总结：
给checkbox动态注册事件时，inputs[i].onclick = singleCheck;不能写成inputs[i].onclick = singleCheck(); -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //全选
        function checkAll() {
            //触发事件的对象
            var obj = event.srcElement;
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                //判断当前input对象，是不是checkbox
                if (inputs[i].type == "checkbox") {
                    inputs[i].checked = obj.checked;
                }
            }
        }

        //给所有子checkbox注册事件
        window.onload = function () {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == "checkbox" && inputs[i].id != "chkAll") {
                    //注意注册事件不能写成inputs[i].onclick = singleCheck();
                    inputs[i].onclick = singleCheck;
                }
            }
        }

        //反选
        function btn_click() { 
            var inputs = document.getElementsByTagName("input")
            for (var j = 0; j < inputs.length; j++) {
                if (inputs[j].type == "checkbox" && inputs[j].id != "chkAll") {
                    inputs[j].checked = !inputs[j].checked;
                }
            }
            singleCheck();
        }

        //子checkbox事件的方法，判断所有子checkbox是否都被选中
        function singleCheck() {
            var inputs = document.getElementsByTagName("input");
            //假设所有checkbox都选中
            var isCheckAll = true;
            for (var j = 0; j < inputs.length; j++) {
                if (inputs[j].type == "checkbox" && inputs[j].id != "chkAll") {
                    if (!inputs[j].checked) {
                        isCheckAll = false;
                        break;
                    }
                }
            }
            //设置全选的状态
            document.getElementById("chkAll").checked = isCheckAll;
        }
    </script>
</head>
<body>
    <input type="checkbox" id="chkAll" οnclick="checkAll()"/>全选
    <input type="button" id="btnCon" value="反选" οnclick="btn_click()"/>
    <br/>
    <input type="checkbox" value="chifan" name="aihao"/>吃饭
    <input type="checkbox" value="shuijiao" name="aihao"/>睡觉
    <input type="checkbox" value="dadoudou" name="aihao"/>打豆豆
</body>
</html>

kuangjian007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jack's Notes12——全选、全不选、反选(循环遍历给按钮动态注册事件)

 //全选 function checkAll() { //触发事件的对象 v
复制链接

扫一扫