我想让复选框控制所有的开关按钮

Question

Whosebug 的各位好心人，大家好。我写了这段代码，但我想我真的把它搞砸了。这个问题的主要焦点是复选框（应该控制所有开关按钮）

现在是问题...

您会注意到，在您打开一个或两个开关按钮后，当您尝试选中复选框（即该列的 table 标题）时，开关按钮似乎会摇晃或猛拉回来在相反的方向。

我在这里想要实现的是让 all 开关按钮跟随相同选中或关闭复选框时的方向。

请大家帮帮我，谢谢:)

<!DOCTYPE html>
<html lang="en">
<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" />
    <style>
        body{
            background-color: #e0e0e0;
        }
        .ads_banner_list .ads_banner_list_head{
            background-color: #f0f0f0;
            text-transform: capitalize;
            padding: 10px 0 10px 20px;
        }

        .ads_banner_list .ads_banner_list_body{
            width: 100%;
        }

        .ads_banner_list .ads_banner_list_body table{
            border-collapse: collapse;
            width: 100%;
        }

        table td:not(th){
            font-size: 12px;
        }

        table th{
            font-size: 12px;
        }

        table select{
            font-size: 12px;
        }

        table button{
            font-size: 12px;
            padding: 5px;
            text-transform: uppercase;
        }

        table .chk_line{
            width: 50px;
            height: 4px;
            background-color: #807b10;
            display: inline-block;
            position: relative;
            cursor: pointer;
        }

        table .chk_line .chk_btn{
            position: absolute;
            line-height: 25px;
            width: 25px;
            height: 25px;
            background-color: #fff;
            text-transform: uppercase;
            font-size: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        .chk_btn.chk_off{
            left: 0;
        }

        .chk_btn.chk_on{
            right: 0;
        }

        thead tr{
            border-bottom-width: 2px;
            border-bottom-style: solid;
            border-bottom-color: #000;
        }
        tbody tr:not(:last-child){
            border-bottom-width: 2px;
            border-bottom-style: solid;
            border-bottom-color: #000;
        }

        th,td{
            text-align: center;
            padding: 10px 0px;
        }

        .td_img img{
            width: 70px;
            height: 40px;
        }

        .approved{
            color: chartreuse;
        }
        .pending{
            color: palevioletred;
        }
        .disapproved{
            color: maroon;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="ads_banner_list">
        <div class="ads_banner_list_head">banner list</div>
        <div class="ads_banner_list_body">
            <table>
                <thead>
                    <tr>
                        <th>I.D.</th>
                        <th>Type</th>
                        <th>Banner</th>
                        <th>Status</th>
                        <th>Validity</th>
                        <th>Expiration</th>
                        <th>Section</th>
                        <th>Clicks</th>
                        <th><input type="checkbox" /></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Static</td>
                        <td class="td_img"><img src="./assets/media/images/ads/vita_malt.jpg" alt="" /></td>
                        <td>Showing</td>
                        <td>30 Days</td>
                        <td>15 Days</td>
                        <td>Home</td>
                        <td>100</td>
                        <td class="chk_td">
                            <div class="chk_line chk_line1"><div class="chk_btn chk_btn1">off</div></div>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Animated</td>
                        <td class="td_img"><img src="./assets/media/images/gif/heineken.gif" alt="" /></td>
                        <td>Queued</td>
                        <td>1 Day</td>
                        <td>5 Hours</td>
                        <td>General</td>
                        <td>0</td>
                        <td class="chk_td">
                            <div class="chk_line chk_line2"><div class="chk_btn chk_btn2">off</div></div>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Static</td>
                        <td class="td_img"><img src="./assets/media/images/ads/indomie.jpg" alt="" /></td>
                        <td>Showing</td>
                        <td>7 Days</td>
                        <td>3 Days</td>
                        <td>Politics</td>
                        <td>76</td>
                        <td class="chk_td">
                            <div class="chk_line chk_line3"><div class="chk_btn chk_btn3">off</div></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
<script>
    let checkbox = document.querySelector('input[type="checkbox"]')
    let chk_btn = document.getElementsByClassName('chk_btn')
    let chk_line1 = document.querySelector('.chk_line1')
    let chk_line2 = document.querySelector('.chk_line2')
    let chk_line3 = document.querySelector('.chk_line3')
    let chk_btn1 = document.querySelector('.chk_btn1')
    let chk_btn2 = document.querySelector('.chk_btn2')
    let chk_btn3 = document.querySelector('.chk_btn3')

    checkbox.onclick = () => {
        for (let i = chk_btn.length - 1; i >= 0; i--) {
            let checkedButton = chk_btn[i];
            checkedButton.classList.toggle('chk_on')
            if (checkedButton.classList.contains('chk_on')) {
                checkedButton.textContent = 'on'
            } else if (!checkedButton.classList.contains('chk_off')) {
                checkedButton.textContent = 'off'
            }
        }
    }

    chk_line1.onclick = () => {
        chk_btn1.classList.toggle('chk_on')
        if (chk_btn1.classList.contains('chk_on')) {
            chk_btn1.textContent = 'on'
        } else if (!chk_btn1.classList.contains('chk_off')) {
            chk_btn1.textContent = 'off'
        }
    }

    chk_line2.onclick = () => {
        chk_btn2.classList.toggle('chk_on')
        if (chk_btn2.classList.contains('chk_on')) {
            chk_btn2.textContent = 'on'
        } else if (!chk_btn2.classList.contains('chk_off')) {
            chk_btn2.textContent = 'off'
        }
    }

    chk_line3.onclick = () => {
        chk_btn3.classList.toggle('chk_on')
        if (chk_btn3.classList.contains('chk_on')) {
            chk_btn3.textContent = 'on'
        } else if (!chk_btn3.classList.contains('chk_off')) {
            chk_btn3.textContent = 'off'
        }
    }
</script>

Answer 1

按钮状态和复选框状态之间应该存在逻辑关系，如下所示：

<!DOCTYPE html>
<html lang="en">
<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" />
    <style>
        body{
            background-color: #e0e0e0;
        }
        .ads_banner_list .ads_banner_list_head{
            background-color: #f0f0f0;
            text-transform: capitalize;
            padding: 10px 0 10px 20px;
        }

        .ads_banner_list .ads_banner_list_body{
            width: 100%;
        }

        .ads_banner_list .ads_banner_list_body table{
            border-collapse: collapse;
            width: 100%;
        }

        table td:not(th){
            font-size: 12px;
        }

        table th{
            font-size: 12px;
        }

        table select{
            font-size: 12px;
        }

        table button{
            font-size: 12px;
            padding: 5px;
            text-transform: uppercase;
        }

        table .chk_line{
            width: 50px;
            height: 4px;
            background-color: #807b10;
            display: inline-block;
            position: relative;
            cursor: pointer;
        }

        table .chk_line .chk_btn{
            position: absolute;
            line-height: 25px;
            width: 25px;
            height: 25px;
            background-color: #fff;
            text-transform: uppercase;
            font-size: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        .chk_btn.chk_off{
            left: 0;
        }

        .chk_btn.chk_on{
            right: 0;
        }

        thead tr{
            border-bottom-width: 2px;
            border-bottom-style: solid;
            border-bottom-color: #000;
        }
        tbody tr:not(:last-child){
            border-bottom-width: 2px;
            border-bottom-style: solid;
            border-bottom-color: #000;
        }

        th,td{
            text-align: center;
            padding: 10px 0px;
        }

        .td_img img{
            width: 70px;
            height: 40px;
        }

        .approved{
            color: chartreuse;
        }
        .pending{
            color: palevioletred;
        }
        .disapproved{
            color: maroon;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="ads_banner_list">
        <div class="ads_banner_list_head">banner list</div>
        <div class="ads_banner_list_body">
            <table>
                <thead>
                    <tr>
                        <th>I.D.</th>
                        <th>Type</th>
                        <th>Banner</th>
                        <th>Status</th>
                        <th>Validity</th>
                        <th>Expiration</th>
                        <th>Section</th>
                        <th>Clicks</th>
                        <th><input type="checkbox" /></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Static</td>
                        <td class="td_img"><img src="./assets/media/images/ads/vita_malt.jpg" alt="" /></td>
                        <td>Showing</td>
                        <td>30 Days</td>
                        <td>15 Days</td>
                        <td>Home</td>
                        <td>100</td>
                        <td class="chk_td">
                            <div class="chk_line chk_line1"><div class="chk_btn chk_btn1">off</div></div>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Animated</td>
                        <td class="td_img"><img src="./assets/media/images/gif/heineken.gif" alt="" /></td>
                        <td>Queued</td>
                        <td>1 Day</td>
                        <td>5 Hours</td>
                        <td>General</td>
                        <td>0</td>
                        <td class="chk_td">
                            <div class="chk_line chk_line2"><div class="chk_btn chk_btn2">off</div></div>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Static</td>
                        <td class="td_img"><img src="./assets/media/images/ads/indomie.jpg" alt="" /></td>
                        <td>Showing</td>
                        <td>7 Days</td>
                        <td>3 Days</td>
                        <td>Politics</td>
                        <td>76</td>
                        <td class="chk_td">
                            <div class="chk_line chk_line3"><div class="chk_btn chk_btn3">off</div></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
<script>
    let checkbox = document.querySelector('input[type="checkbox"]')
    let chk_btn = document.getElementsByClassName('chk_btn')
    let chk_line1 = document.querySelector('.chk_line1')
    let chk_line2 = document.querySelector('.chk_line2')
    let chk_line3 = document.querySelector('.chk_line3')
    let chk_btn1 = document.querySelector('.chk_btn1')
    let chk_btn2 = document.querySelector('.chk_btn2')
    let chk_btn3 = document.querySelector('.chk_btn3')
    let checked = new Set;

    checkbox.onclick = () => {
        for (let i = chk_btn.length - 1; i >= 0; i--) {
            let checkedButton = chk_btn[i];
            if (checkbox.checked)
              checkedButton.classList.add('chk_on');
            else
              checkedButton.classList.remove('chk_on');
            if (checkedButton.classList.contains('chk_on')) {
                checkedButton.textContent = 'on'
            } else if (!checkedButton.classList.contains('chk_off')) {
                checkedButton.textContent = 'off'
            }
        }
        if (checkbox.checked)
          checked.add(chk_btn1).add(chk_btn2).add(chk_btn3);
        else
          checked.clear();
    }

    chk_line1.onclick = () => {
        chk_btn1.classList.toggle('chk_on')
        if (chk_btn1.classList.contains('chk_on')) {
            chk_btn1.textContent = 'on'
            checked.add(chk_btn1);
        } else if (!chk_btn1.classList.contains('chk_off')) {
            chk_btn1.textContent = 'off'
            checked.delete(chk_btn1);
        }
        checkbox.checked = checked.size === 3;
    }

    chk_line2.onclick = () => {
        chk_btn2.classList.toggle('chk_on')
        if (chk_btn2.classList.contains('chk_on')) {
            chk_btn2.textContent = 'on'
            checked.add(chk_btn2);
        } else if (!chk_btn2.classList.contains('chk_off')) {
            chk_btn2.textContent = 'off'
            checked.delete(chk_btn2);
        }
        checkbox.checked = checked.size === 3;
    }

    chk_line3.onclick = () => {
        chk_btn3.classList.toggle('chk_on')
        if (chk_btn3.classList.contains('chk_on')) {
            chk_btn3.textContent = 'on'
            checked.add(chk_btn3);
        } else if (!chk_btn3.classList.contains('chk_off')) {
            chk_btn3.textContent = 'off'
            checked.delete(chk_btn3);
        }
        checkbox.checked = checked.size === 3;
    }
</script>

我想让复选框控制所有的开关按钮

I want the checkbox to control all switch buttons

html

javascript

css

checkbox