JS-checkbox多选框之全选、反选、不选

最新推荐文章于 2024-04-02 19:39:43 发布

梦想不断超越

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量406

点赞数

分类专栏： Web 文章标签： JavaScript checkbox 反选

本文链接：https://blog.csdn.net/lujiachun1/article/details/54807852

版权

Web 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>win01</title>
<body>
    <form method="post" action="">
        请选择您的爱好:<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="CheckAll" value="全  选" />
        <input type="button" id="CheckNo" value="全不选" />
        <input type="button" id="CheckRev" value="反  选" />
        <input type="button" id="Reversal" value="全选/不选" />
    </form>
</body>
<script type="text/javascript">
    // 全选
    document.getElementById("CheckAll").onclick = function() {
        var items = document.getElementsByName("items");
        for (var i = 0; i < items.length; i++) {
            items[i].checked = true;
        }
    }
    // 全不选
    document.getElementById("CheckNo").onclick = function() {
        var items = document.getElementsByName("items");
        for (var i = 0; i < items.length; i++) {
            items[i].checked = false;
        }
    }
    // 反选
    document.getElementById("CheckRev").onclick = function() {
        var items = document.getElementsByName("items");
        for (var i = 0; i < items.length; i++) {
            items[i].checked = !items[i].checked;
        }
    }
    // 全选/不选
    document.getElementById("Reversal").onclick = function() {
        var items = document.getElementsByName("items");
        if (items[0].checked) {
            for (var i = 0; i < items.length; i++) {
                items[i].checked = false;
            }
        } else {
            for (var i = 0; i < items.length; i++) {
                items[i].checked = true;
            }
        }
    }
</script>
</head>
</html>