Я хочу, чтобы флажок управлял всеми кнопками переключения

добрые люди из StackOverflow, приветствую вас всех. Я написал этот код и думаю, что действительно все испортил. Основным фокусом этой проблемы является флажок (который должен управлять всеми кнопками переключения)

ТЕПЕРЬ ПРОБЛЕМА...

Вы заметите, что после включения одной или двух кнопок переключателей, когда вы пытаетесь установить флажок (который является заголовком таблицы в этом столбце), кажется, что кнопки переключателей трясутся или дергаются вперед и назад в противоположные направления.

Здесь я пытаюсь добиться того, чтобы кнопки переключения все следовали направлению такой же всякий раз, когда флажок установлен или выключен.

Пожалуйста, помогите мне, ребята, спасибо :)

<!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>
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
0
34
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Другие вопросы по теме