JavaScript之checkbox选择

最新推荐文章于 2022-07-03 16:22:29 发布

toypipi

最新推荐文章于 2022-07-03 16:22:29 发布

阅读量536

点赞数

分类专栏： JavaScript 文章标签： javascript checkbox 选择

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文内容来自《15. 尚硅谷佟刚_JavaScript DOM编程实验之Select级联选择》视频教程，版权归期所有，仅作记录以备后查。效果如下：
这里写图片描述

源代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script type="text/javascript">

        //需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中
        //若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中
        //若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中
        //若 name=items 的 checkbox 有一个没有被选中, 则 #checkedAll_2 取消选择.

        //提示: 事件需要加给  #checkedAll_2, 获取 name=items 的 checkbox 数组
        //判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择
        //若没有被选择, 则 name=items 的 checkbox 都要取消选择
        //根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择
        //checked = false 取消选择. 

        //还需要给每个  name=items 的 checkbox 加响应函数
        //判断  name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等.
        //若都被选择: 则使  #checkedAll_2 被选择
        //若没有都被选择: 则使  #checkedAll_2 取消选择

        window.onload = function () {
            document.getElementById("checkedAll_2").onclick = function () {
                var flag = this.checked;
                var items = document.getElementsByName("items");
                for(var i = 0;i < items.length;i++) {
                    items[i].checked = flag;
                }
            }

            var items = document.getElementsByName("items");
            for(var i = 0;i < items.length;i++) {
                items[i].onclick = function () {
                    //记录有多少个 items 被选中了
                    var number = 0;
                    for(var j = 0;j < items.length;j++) {
                        if(items[j].checked) {
                            number++;
                        }
                    }

                    document.getElementById("checkedAll_2").checked = (items.length == number);
                }
            }

            document.getElementById("CheckedAll").onclick = function () {
                for(var i = 0;i < items.length;i++) {
                    items[i].checked = true;
                }
            }

            document.getElementById("CheckedNo").onclick = function () {
                for(var i = 0;i < items.length;i++) {
                    items[i].checked = false;
                }
            }

            document.getElementById("CheckedRev").onclick = function () {
                for(var i = 0;i < items.length;i++) {
                    items[i].checked = !items[i].checked;
                }
            }

            document.getElementById("send").onclick = function () {
                for(var i = 0;i < items.length;i++) {
                    if (items[i].checked) {
                        alert(items[i].value);
                    }
                }
            }
        }

    </script>
    <style type="text/css">

    </style>
</head>
<body>
    <form method="post" action="">
        你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选

        <br /> 
        <input type="checkbox" name="items" value="足球" />足球 
        <input type="checkbox" name="items" value="篮球" />篮球 
        <input type="checkbox" name="items" value="羽毛球" />羽毛球 
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br /> 
        <input type="button" id="CheckedAll" value="全　选" /> 
        <input type="button" id="CheckedNo" value="全不选" /> 
        <input type="button" id="CheckedRev" value="反　选" /> 
        <input type="button" id="send" value="提　交" />
    </form>

</body>
</html>

toypipi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之checkbox选择

本文内容来自《15. 尚硅谷佟刚_JavaScript DOM编程实验之Select级联选择》视频教程，版权归期所有，仅作记录以备后查。效果如下：源代码如下：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title
复制链接

扫一扫