Изменение свойств элемента-2

<div class="container">
    <h3>Выберите цвет</h3>
    <div class="options" id="colorOptions">
        <input type="radio" id="blue" name="color" value="blue"><label for="blue">Синий</label>
        <input type="radio" id="red" name="color" value="red"><label for="red">Красный</label>
        <input type="radio" id="green" name="color" value="green"><label for="green">Зеленый</label>
        <input type="radio" id="yellow" name="color" value="yellow"><label for="yellow">Желтый</label>
        <input type="radio" id="black" name="color" value="black" checked><label for="black">Черный</label>
    </div>

<h3>Выберите форму</h3>
    <div class="options" id="shapeOptions">
        <input type="radio" id="circle" name="shape" value="circle" checked><label for="circle">Круг</label>
        <input type="radio" id="square" name="shape" value="square"><label for="square">Квадрат</label>
        <input type="radio" id="pill" name="shape" value="pill"><label for="pill">Капсула</label>
        <input type="radio" id="rectangle" name="shape" value="rectangle"><label for="rectangle">Прямоугольник</label>
    </div>

<h3>Кастомизация</h3>
    <div class="options">
        <input type="checkbox" id="border"><label for="border">Грань</label>
        <input type="checkbox" id="background" checked><label for="background">Заливка</label>
    </div>

document.addEventListener("DOMContentLoaded", () => {
    const colorOptions = document.getElementsByName("color");
    const shapeOptions = document.getElementsByName("shape");
    const borderCheckbox = document.getElementById("border");
    const backgroundCheckbox = document.getElementById("background");
    const shapeDisplay = document.getElementById("shapeDisplay");

// Функция для обновления фигуры
    function updateShape() {
        // Установка цвета
        colorOptions.forEach(option => {
            if (option.checked) {
                if (backgroundCheckbox.checked) {
                    shapeDisplay.style.backgroundColor = option.value;
                } else {
                    shapeDisplay.style.backgroundColor = "transparent";
                }
            }
        });

// Установка формы
        shapeDisplay.className = "shape";
        shapeOptions.forEach(option => {
            if (option.checked) {
                shapeDisplay.classList.add(option.value);
            }
        });

// Установка границы
        if (borderCheckbox.checked) {
            shapeDisplay.style.border = "2px solid #000";
        } else {
            shapeDisplay.style.border = "none";
        }
    }

// События для обновления при изменении параметров
    colorOptions.forEach(option => option.addEventListener("change", updateShape));
    shapeOptions.forEach(option => option.addEventListener("change", updateShape));
    borderCheckbox.addEventListener("change", updateShape);
    backgroundCheckbox.addEventListener("change", updateShape);

updateShape(); // Начальная установка
});

Results:

Выберите цвет

Выберите форму

Кастомизация