【javascript】全选按钮

ོ栖落

已于 2023-06-24 14:58:09 修改

阅读量240

点赞数

分类专栏： # javascript 文章标签： javascript

于 2023-06-24 14:57:56 首次发布

本文链接：https://blog.csdn.net/qq_63806300/article/details/131361892

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

当点击全选按钮时，与之相关的所有选项都会被自动框选。

效果：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <label><input type="checkbox" id="all">全选</label><br>
        <label><input type="checkbox" name="fruit">香蕉</label><br>
        <label><input type="checkbox" name="fruit">苹果</label><br>
        <label><input type="checkbox" name="fruit">梨子</label><br>
        <script>
            window.onload = function() {
                var all = document.getElementById("all");
                var fruit = document.getElementsByName("fruit");
                all.onchange = function(){
                    if(this.checked) {
                        for(var i=0;i<fruit.length;i++)
                            fruit[i].checked = true;
                    }
                    else {
                        for(var i=0;i<fruit.length;i++)
                            fruit[i].checked = false;
                    }
                }
            }
        </script>
    </body>
</html>