>切换照片

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .outer {
            width: 640px;
            margin: 50px auto;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function () {
            /* 
                点击按钮切换图片
            */

            // 获取info
            const info = document.getElementById("info")

            // 获取到图片
            const img = document.getElementsByTagName("img")[0]

            // 获取两个按钮
            const prev = document.getElementById("prev")
            const next = document.getElementById("next")

            // 创建一个数组来存储图片的路径
            const imgArr = [
                "./images/1.png",
                "./images/2.png",
                "./images/3.png",
                "./images/4.png",
                "./images/5.png",
            ]

            // 创建一个变量记录当前图片的索引
            let current = 0

            // 设置info元素的内容，显示总图片数和当前图片索引
            info.textContent = `总共 ${imgArr.length} 张图片，当前第 ${current + 1} 张`

            // 上一张
            prev.onclick = function () {
                current--

                // 如果当前图片索引小于0，则设置为最后一张图片的索引
                if (current < 0) {
                    // current = 0
                    current = imgArr.length - 1
                }
                // 更新img元素的src属性，显示当前图片
                img.src = imgArr[current]

                // 更新info元素的内容，显示总图片数和当前图片索引
                info.textContent = `总共 ${imgArr.length} 张图片，当前第 ${current + 1} 张`

            }

            // 点击next按钮后，切换图片
            next.onclick = function () {
                current++

                if (current > imgArr.length - 1) {
                    // current = imgArr.length - 1
                    current = 0
                }

                // 切换图片 --> 2.png 就是修改img的src属性
                img.src = imgArr[current]

                info.textContent = `总共 ${imgArr.length} 张图片，当前第 ${current + 1} 张`

            }
        }
    </script>
</head>

<body>
    <div class="outer">
        <p id="info">
            总共n张图片，当前第m张
        </p>
        <div class="img-wrapper">
            <img src="./images/1.png" alt="这是一个图片" />
        </div>

        <div class="btn-wrapper">
            <button id="prev">上一张</button>
            <button id="next">下一张</button>
        </div>
    </div>
</body>

</html>

>选择框

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
              name="viewport">
        <meta content="ie=edge" http-equiv="X-UA-Compatible">
        <title>Document</title>
    </head>
    <body>
        <div>
            <form action="#">
                <div>
                    请选择你的爱好：
                    <input id="check-all" type="checkbox"/> 全选
                </div>
                <div>
                    <input name="hobby" type="checkbox" value="乒乓球"/> 乒乓球
                    <input name="hobby" type="checkbox" value="篮球"/> 篮球
                    <input name="hobby" type="checkbox" value="羽毛球"/> 羽毛球
                    <input name="hobby" type="checkbox" value="足球"/> 足球
                </div>
                <div>
                    <button id="all" type="button">全选</button>
                    <button id="no" type="button">取消</button>
                    <button id="reverse" type="button">反选</button>
                    <button id="send" type="button">提交</button>
                </div>
            </form>
        </div>
        <script src="main.js"></script>
    </body>
</html>

const hobby = document.getElementsByName("hobby")
const allBtn = document.getElementById('all')
allBtn.onclick = function () {
    for (let i = 0; i < hobby.length; i++) {
        hobby[i].checked = true
    }
    checkBtn.checked = true
}
const noBtn = document.getElementById('no')
noBtn.onclick = function () {
    for (let i = 0; i < hobby.length; i++) {
        hobby[i].checked = false
    }
    checkBtn.checked = false
}
const reverseBtn = document.getElementById('reverse')
reverseBtn.onclick = function () {
    for (let i = 0; i < hobby.length; i++) {
        hobby[i].checked = !hobby[i].checked
    }
    const checkedBox = document.querySelectorAll(
        "[name=hobby]:checked"
    )

    if (hobby.length === checkedBox.length) {
        checkBtn.checked = true
    } else {
        checkBtn.checked = false
    }
}
const sendBtn = document.getElementById('send')
sendBtn.onclick = function () {
    for (let i = 0; i < hobby.length; i++) {
        hobby[i].checked && alert(hobby[i].value)
    }
}
const checkBtn = document.getElementById('check-all')
checkBtn.onchange = function () {
    for (let i = 0; i < hobby.length; i++) {
        hobby[i].checked = this.checked
    }
}
for (let i = 0; i < hobby.length; i++) {
    hobby[i].onchange = function () {
        const checkedBox = document.querySelectorAll(
            "[name=hobby]:checked"
        )

        if (hobby.length === checkedBox.length) {
            checkBtn.checked = true
        } else {
            checkBtn.checked = false
        }
    }
}