实现全选,反选,不选

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

pinkowonote

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

阅读量205

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/pinkowonote/article/details/107690624

版权

Javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!-- 实现全选,反选,不选
1. 获取若干个checkbox和3个button按钮
2. 在3个button按钮中添加onclick事件
3. checkbox选择:checked = "true"(checked = "checked"可不可以?)
4. 全选:选择所有checkbox,将其值设置为checked = "true"
5. 不选:选择所有checkbox,将其值设置为checked = "false"
6. 反选:手动check某些checkbox,使用if判断语句:
if(checked == "true"){
    checked = "false"
}
else{
    checked = "true"
} -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            var oallCheck = document.getElementById("allCheck");
            var onoCheck = document.getElementById("noCheck");
            var oreverseCheck = document.getElementById("reverseCheck");
            var ochooseBox = document.getElementById("chooseBox");
            var obox = ochooseBox.getElementsByTagName("input");

            oallCheck.onclick = function () {
                //console.log(obox[1].checked);
                for (var i = 0; i < obox.length; i++) {
                    // obox[i].checked = true;
                    obox[i].checked = "checked";
                }
            }

            onoCheck.onclick = function () {
                for (var i = 0; i < obox.length; i++) {
                    //不能写"false"
                    // obox[i].checked = false;
                    obox[i].checked = "";
                }
            }

            oreverseCheck.onclick = function () {
                for (var i = 0; i < obox.length; i++) {
                    if (obox[i].checked == true) {
                        obox[i].checked = false
                    }
                    else {
                        obox[i].checked = true
                    }
                }
            }
        }
    </script>
</head>

<body>
    <button id="allCheck">全选</button>
    <button id="noCheck">不选</button>
    <button id="reverseCheck">反选</button><br>
    <div id="chooseBox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
    </div>
</body>

</html>

在这里插入图片描述

pinkowonote

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现全选,反选,不选

<!-- 实现全选,反选,不选1. 获取若干个checkbox和3个button按钮2. 在3个button按钮中添加onclick事件3. checkbox选择:checked = "true"(checked = "checked"可不可以?)4. 全选:选择所有checkbox,将其值设置为checked = "true"5. 不选:选择所有checkbox,将其值设置为checked = "false"6. 反选:手动check某些checkbox,使用if判断语句:if(che
复制链接

扫一扫