Динамические радиокнопки HTML с помощью JavaScript

К концу этого учебника по JavaScript вы узнаете, как динамически создавать радиокнопки ввода HTML, а также как их группировать.

Вы также узнаете, как сохранять и извлекать выбранные данные радиокнопок с помощью локального хранилища.

• Определение элемента обертки HTML
• Создайте объект модели данных
• Динамическое добавление ярлыка входных радиокнопок
• Динамическое добавление радиокнопок ввода
• Стиль радиокнопки
• Группировать радиокнопки
• Получить состояние выбранной радиокнопки
• Сохранить данные в локальном хранилище
• Получить сохраненные данные из локального хранилища

Определите элемент обертки HTML

Объявите элемент HTML wrapper div с id под названием radioButtonsWrapElem в файле index.html, в котором мы будем динамически добавлять радиокнопки с помощью JavaScript.

<div id="radioButtonsWrapElem">
</div>

Затем создайте DOM-ссылку на элемент div внутри кода JavaScript.

const radioButtonsWrapElem = document.getElementById("radioButtonsWrapElem");

Создание объекта модели данных

Для того чтобы создать динамическую радиокнопку, нам необходимо иметь источник данных, которые вы обычно получаете из внешней базы данных или API.

В этом примере я буду использовать простой объект JavaScript с некоторыми данными.

const data = {
    "White": false,
    "Light Grey": false,
    "Dark Grey": false,
    "Black": false,
}

Как вы можете видеть, внутри объекта JavaScript с данными у меня есть пары ключ-значение, ключ ссылается на название цвета, а значение – это булева величина, отражающая выбранное состояние. Как вы можете видеть, по умолчанию все они имеют значение false.

Название цвета будет меткой каждой радиокнопки, а значение – ее выбранным состоянием.

Динамическое добавление меток радиокнопок

Первым шагом будет итерация объекта данных с помощью цикла for..in и объявление переменной key в заголовке цикла, которая будет содержать названия цветов объекта данных, например White, Light Grey и т.д.

for (let key in data) {
    let label = document.createElement("label");
    label.innerText = key;
    radioButtonsWrapElem.appendChild(label);
}

Внутри цикла создайте элемент label, вызвав метод createElement, передав в качестве аргумента объект документа label, и сохраните его в переменной label.

Затем присвойте ключ innerText метки.

Наконец, добавьте элемент label к элементу обертки радиокнопок.

Добавление радиокнопок динамически

Чтобы создать радиокнопку, нам нужно определить элемент input и присвоить его переменной input.

for (let key in data) {
    let label = document.createElement("label");
    label.innerText = key;
    let input = document.createElement("input");
    input.type = "radio";
    label.appendChild(input);
    colourRadioButtons.appendChild(label);
}

Затем измените тип ввода на radio.

Наконец, добавьте элемент input к элементу label.

Стиль радиокнопки

Давайте добавим несколько простых CSS-стилей к элементу Label.

label {
    border: 1px solid grey;
    margin: 5px;
    padding: 10px;
    cursor: pointer;
}

Группировка радиокнопок

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

Этого можно добиться, если сгруппировать радиокнопки, используя атрибут name с одинаковым значением для всех радиокнопок, в данном случае color.

for (let key in data) {
    let label = document.createElement("label");
    label.innerText = key;
    ...
    input.name = "colour";
    label.appendChild(input);
    colourRadioButtons.appendChild(label);
}

Вы можете видеть, что все радиокнопки ввода сгруппированы по атрибуту name.

Теперь мы можем выбрать только одну радиокнопку за раз, что именно то, что мы хотели.

Получение состояния выбранной радиокнопки

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

for (let key in data) {
    ...
    input.name = "colour";
    input.addEventListener('change', () => {
        Object.keys(data).forEach(key => {
            data[key] = false;
        })
        data[key] = true;
    });
    label.appendChild(input);
    ...
}

Внутри события изменения пройдитесь по объекту данных и установите значения всех их свойств в false, что очистит все существующие выбранные свойства.

Затем установите значение текущего выбранного свойства в true внутри объекта данных.

Сохранение данных радиокнопок в локальном хранилище

Теперь у нас есть данные, отражающие состояние группы радиокнопок, поэтому нам остается только сохранить их в локальном хранилище.

window.localStorage.setItem("data", JSON.stringify(data));

Как видите, мне пришлось преобразовать объект данных в строку JSON, поскольку мы не можем сохранить объект JavaScript в локальном хранилище напрямую.

Получение сохраненных данных из локального хранилища

Теперь я хочу проверить, есть ли данные, сохраненные в локальном хранилище, если да, то использовать эти данные, в противном случае использовать данные по умолчанию.

Поэтому замените приведенный ниже код:

const data = {
    "White": false,
    "Light Grey": false,
    "Dark Grey": false,
    "Black": false,
}

этим:

let data = {};

if (window.localStorage.getItem("data")) {
    data = JSON.parse(window.localStorage.getItem("data"));
} else {
    data = {
        "White": false,
        "Light Grey": false,
        "Dark Grey": false,
        "Black": false,
    }
}

Наконец, я хочу установить для выбранной радиокнопки флажок.

Для этого добавьте следующий код прямо над событием change, но внутри цикла.

input.checked = data[key] ? data[key] : false;

Заключение

Как вы можете видеть, насколько легко было создать HTML радиокнопки динамически с помощью JavaScript, а также хранить и получать их из источника данных.

Если у вас возникли вопросы или вы хотите что-то добавить к этому руководству, пожалуйста, свяжитесь со мной, оставив комментарий ниже.

Счастливого кодинга.