JS之checkbox多选框的全选、反选、不选用法

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>前端abc--qdabc.cn</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>

欢迎分享本文,转载请保留出处:前端ABC » JS之checkbox多选框的全选、反选、不选用法

赞 (1)
分享到:更多 ()

发表评论 0