Динамические радиокнопки 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, а также хранить и получать их из источника данных.

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

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

Оцените статью
Procodings.ru
Добавить комментарий