Checkbox в JavaScript: проверка состояния и значений флажка

В этом руководстве вы узнаете, как использовать JavaScript, чтобы проверить, установлен ли флажок, получить значения выбранных флажков и установить/снять все флажки.

Содержание

Создание HTML
Проверка состояния флажка
Получение значений
Получение значений нескольких выбранных флажков
Установить/снять все галочки
Динамическое создание
Заключение

Создание HTML

Чтобы создать флажок, вы используете элемент <input> с type checkbox следующим образом:

<input type="checkbox" id="accept"> Accept

Рекомендуется всегда связывать флажок с меткой, чтобы повысить удобство использования и доступность. При этом щелчок по метке также устанавливает или снимает флажок.

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes">  Accept 
</label>

Или же:

<input type="checkbox" id="accept" name="accept" value="yes">  
<label for="accept"> Accept </label>

Обратите внимание, что значение атрибута for метки должно соответствовать идентификатору флажка.

Следующий код работает, но является плохой практикой, поэтому вам следует избегать его:

<input type="checkbox" id="accept" name="accept" value="yes"> Accept

Проверка состояния флажка

Флажок имеет два состояния: установлен и снят.

Чтобы получить состояние флажка, выполните следующие действия:

Сначала установите флажок, используя метод DOM, например, такой как getElementById() или querySelector().
Затем получите доступ к checked элемента флажка. Если его свойство checked равно true, то флажок установлен; в противном случае это не так.

См. следующий пример:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkbox</title>
</head>
<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    </label>

    <script>
        const cb = document.querySelector('#accept');
        console.log(cb.checked); // false
    </script>

</body>

</html>

В этом примере:

Сначала создайте элемент флажка HTML:

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes"> Accept 
</label>

Во-вторых, установите флажок с идентификатором #accept и проверьте свойство checked :

const cb = document.querySelector('#accept');
console.log(cb.checked);

Поскольку флажок не установлен, вы увидите false в консоли:

false

Рассмотрим другой пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkbox</title>
</head>

<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    </label>

    <script>
        const checked = document.querySelector('#accept:checked') !== null;
        console.log(checked); // false
    </script>

</body>
</html>

В этом примере селектор #accept:checked выбирает элемент с идентификатором #accept и атрибутом checked. Например, он соответствует следующему элементу:

<input type="checkbox" id="accept" checked> Accept

Но не этот:

<input type="checkbox" id="accept"> Accept

Следовательно, если флажок элемента с идентификатором #accept установлен, document.querySelector() вернет его. В окне консоли вы увидите значение false, потому что флажок не установлен:

false

Получение значений

На следующей странице показаны флажок и кнопка. Когда вы нажмете кнопку, вы увидите значение флажка в окне консоли:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkbox</title>
</head>

<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept"> Accept
    </label>

    <button id="btn">Submit</button>
    <script>
        const cb = document.querySelector('#accept');
        const btn = document.querySelector('#btn');
        btn.onclick = () => {
           alert(cb.value);
        };
    </script>
</body>

</html>

Когда вы получаете value флажка, то получаете строку 'on' независимо от того, установлен флажок или нет.

Получение значений нескольких выбранных флажков

На следующей странице показаны три флажка. Если вы выберете один или несколько флажков и нажмете кнопку, отобразятся значения выбранного флажка:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkboxes</title>
</head>

<body>
    <p>Select your favorite colors:</p>
    <label for="c1"> <input type="checkbox" name="color" value="red" id="c1">Red</label>
    <label for="c2"><input type="checkbox" name="color" value="green" id="c2"> Green</label>
    <label for="c3"><input type="checkbox" name="color" value="blue" id="c3">Blue</label>
    <p>
        <button id="btn">Get Selected Colors</button>
    </p>

    <script>
        const btn = document.querySelector('#btn');
        btn.addEventListener('click',(event) => {
            let checkboxes = document.querySelectorAll('input[name="color"]:checked');
            let values = [];
            checkboxes.forEach((checkbox) => {
                values.push(checkbox.value);
            });
            alert(values);
        });    
    </script>

</body>

</html>

Как это работает.

В HTML мы создаем три элемента-флажка с одинаковыми именами (цветами), но разными значениями:

<label for="c1"><input type="checkbox" name="color" value="red" id="c1">Red</label>
<label for="c2"><input type="checkbox" name="color" value="green" id="c2">Green</label>
<label for="c3"><input type="checkbox" name="color" value="blue" id="c3">Blue</label>

В JavaScript:

Во-первых, добавьте обработчик события клика на кнопку:

const btn = document.querySelector('#btn');
btn.addEventListener('click',(event) => {
   // ...            
});

Во-вторых, установите выбранные флажки, используя метод document.querySelectorAll() внутри обработчика события клика:

let checkboxes = document.querySelectorAll('input[name="color"]:checked');

В-третьих, поместите значения выбранных флажков в массив:

let values = [];
checkboxes.forEach((checkbox) => {
    values.push(checkbox.value);
});

alert(values);

Установить/снять все галочки

На следующей странице есть три флажка и кнопка. Когда вы нажимаете кнопку, если флажки отмечены, они будут сняты, и наоборот:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Check/uncheck checkboxes</title>
</head>
<body>
    <p>
        <button id="btn">Check / Uncheck All</button>
    </p>
    <label for="c1"><input type="checkbox" name="color" value="red" id="c1"> Red</label>
    <label for="c2"><input type="checkbox" name="color" value="green" id="c2"> Green</label>
    <label for="c3"> <input type="checkbox" name="color" value="blue" id="c3">Blue</label>

    <script>
        function check(checked = true) {
            const checkboxes = document.querySelectorAll('input[name="color"]');
            checkboxes.forEach((checkbox) => {
                checkbox.checked = checked;
            });
        }

        function checkAll() {
            select();
            this.onclick = uncheckAll;
        }

        function uncheckAll() {
            select(false);
            this.onclick = checkAll;
        }

        const btn = document.querySelector('#btn');
        btn.onclick = checkAll;
    </script>

</body>
</html>

Как это работает:

Во-первых, определите функцию check(), которая устанавливает или снимает все флажки с именем "color" :

function check(checked = true) {
  const checkboxes = document.querySelectorAll('input[name="color"]');
  checkboxes.forEach((checkbox) => {
    checkbox.checked = checked;
  });
}

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

Во-вторых, выберите кнопку #btn и назначьте функцию checkAll() onclick свойству кнопки:

const btn = document.querySelector('#btn');
btn.onclick = checkAll;

В-третьих, определите функцию checkAll(), которая проверяет все флажки:

function checkAll() {
  check();
  this.onclick = uncheckAll;
}

Наконец, определите функцию uncheckAll(), которая снимает все флажки:

function uncheckAll() {
  check(false);
  this.onclick = checkAll;
}

Динамическое создание

В следующем примере показано, как динамически создавать флажки с помощью JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkboxes</title>
</head>
<body>
    <div id="root"></div>
    <script>
        const colors = ["Red","Green","Blue"];
        colors.forEach((color)=>{
            //  generate id
            const id = `color-${color}`;

            // create a label
            const label = document.createElement('label');
            label.setAttribute("for", id);
           
            // create a checkbox
            const checkbox = document.createElement('input');
            checkbox.type = "checkbox";
            checkbox.name = "color";
            checkbox.value = color;
            checkbox.id = id;

            // place the checkbox inside a label
            label.appendChild(checkbox);
            // create text node
            label.appendChild(document.createTextNode(color));
            // add the label to the root
            document.querySelector("#root").appendChild(label);
        });
    </script>
</body>
</html>

Выход:

<div class="output-cont"><div class="output">
<iframe height="250px" src="https://www.javascripttutorial.net/sample/dom/checkbox/checkbox-dynamic.html"></iframe>
</div></div>

Как это работает:

Сначала определите массив, состоящий из трех строк. На практике у вас может быть массив, полученный в результате вызова API:

const colors = ["Red","Green","Blue"];

Во-вторых, переберите элементы массива и:

1) Создайте уникальный идентификатор для каждого флажка:

const id = `color-${color}`;

2) Создайте метку и назначьте идентификатор атрибуту for:

const label = document.createElement('label');
label.setAttribute("for", id);

3) Установите флажок:

const checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "color";
checkbox.value = color;
checkbox.id = id;

4) Установите флажок внутри метки:

label.appendChild(checkbox);

5) Создайте текстовый узел и добавьте его к метке:

label.appendChild(document.createTextNode(color));

6) Добавьте метку к корневому элементу:

 document.querySelector("#root").appendChild(label);

В следующем примере также динамически генерируются флажки, как в приведенном выше примере:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkboxes</title>
</head>
<body>
    <div id="root"></div>
    <script>
        const colors = ["Red","Green","Blue"];
        const html = colors.map(color => `<label for="color-${color}">
                <input type="checkbox" name="color" id="color-${color}" value="${color}"> ${color}
            </label>`
        ).join(' ');
       document.querySelector("#root").innerHTML = html;
    </script>
</body>
</html>

В этом примере:

Сначала создайте элемент метки и флажка, используя метод Array map() и литералы шаблона.
Во-вторых, объедините строки HTML в один HTML, используя метод String join().
В-третьих, добавьте HTML к #root.

Заключение

Используйте элемент <input> с типом checkbox для создания элемента флажка.
Поместите флажок внутри элемента метки, чтобы улучшить удобство использования и доступность.
Используйте свойство checkbox.checked или селектор :check, чтобы проверить, установлен ли флажок.
Получите value, чтобы получить значение флажка.

Создание HTML

Проверка состояния флажка

Получение значений

Получение значений нескольких выбранных флажков

Установить/снять все галочки

Динамическое создание

Заключение

Как создать таймер обратного отсчета в JavaScript

Свойство textContent в JavaScript: получение и установка текста

Метод getComputedStyle() в JavaScript

Техника делегирования событий в JavaScript на примерах

Установка встроенных свойств CSS элемента HTML в JavaScript

События загрузки страницы в JavaScript

MutationObserver в JavaScript

JavaScript DOM: как получить дочерние элементы