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

<?php ?>
  <div id="shape"></div>

<div id="controls">
    <p>Выберите цвет фона:</p>

<input type="radio" id="red" name="color" value="red" checked>
    <label for="red">Красный</label>

<input type="radio" id="green" name="color" value="green">
    <label for="green">Зеленый</label>

<input type="radio" id="blue" name="color" value="blue">
    <label for="blue">Синий</label>

<input type="radio" id="yellow" name="color" value="yellow">
    <label for="yellow">Желтый</label>

<input type="radio" id="pink" name="color" value="pink">
    <label for="pink">Розовый</label>

<p>Выберите форму фигуры:</p>

<input type="radio" id="rectangle" name="shape" value="rectangle">
    <label for="rectangle">Прямоугольник</label>

<input type="radio" id="square" name="shape" value="square" checked>
    <label for="square">Квадрат</label>

<p>Включить или отключить границу и фон:</p>

<input type="checkbox" id="border" name="border" checked>
    <label for="border">Граница</label>

// Получаем элементы по идентификаторам
var shape = document.getElementById("shape");
var colorRadios = document.getElementsByName("color");
var shapeRadios = document.getElementsByName("shape");
var borderCheckbox = document.getElementById("border");
var backgroundCheckbox = document.getElementById("background");

// Добавляем обработчики событий для изменения цвета фона
for (var i = 0; i < colorRadios.length; i++) {
  colorRadios[i].addEventListener("change", function() {
    // Устанавливаем цвет фона в соответствии с выбранным значением
    shape.style.backgroundColor = this.value;
  });
}

// Добавляем обработчики событий для изменения формы фигуры
for (var i = 0; i < shapeRadios.length; i++) {
  shapeRadios[i].addEventListener("change", function() {
    // Устанавливаем ширину и высоту в соответствии с выбранной формой
    if (this.value == "circle") {
      shape.style.width = "100px";
      shape.style.height = "100px";
      shape.style.borderRadius = "50%";
    } else if (this.value == "oval") {
      shape.style.width = "150px";
      shape.style.height = "100px";
      shape.style.borderRadius = "50%";
    } else if (this.value == "rectangle") {
      shape.style.width = "150px";
      shape.style.height = "100px";
      shape.style.borderRadius = "0%";
    } else if (this.value == "square") {
      shape.style.width = "100px";
      shape.style.height = "100px";
      shape.style.borderRadius = "0%";
    }
  });
}

// Добавляем обработчик события для включения или отключения границы
borderCheckbox.addEventListener("change", function() {
  // Устанавливаем стиль границы в соответствии с состоянием флажка
  if (this.checked) {
    shape.style.border = "1px solid black";
  } else {
    shape.style.border = "none";
  }
});

// Добавляем обработчик события для включения или отключения фона
backgroundCheckbox.addEventListener("change", function() {
  // Устанавливаем цвет фона в соответствии с состоянием флажка
  if (this.checked) {
    shape.style.backgroundColor = document.querySelector('input[name="color"]:checked').value;
  } else {
    shape.style.backgroundColor = "transparent";
  }
});

/* Общий стиль для всех кнопок */
input[type="radio"],
input[type="checkbox"] {
  display: none;
  /* Скрываем стандартные кнопки */
}

input[type="radio"]+label,
input[type="checkbox"]+label {
  display: inline-block;
  /* Делаем кнопки блочными */
  padding: 10px 20px;
  /* Добавляем отступы */
  border: 2px solid #333;
  /* Добавляем границу */
  border-radius: 5px;
  /* Скругляем углы */
  cursor: pointer;
  /* Меняем курсор на руку */
  transition: all 0.3s ease;
  /* Добавляем анимацию перехода */
}

/* Стиль для выбранной кнопки */
input[type="radio"]:checked+label,
input[type="checkbox"]:checked+label {
  background-color: #333;
  /* Меняем цвет фона */
  color: white;
  /* Меняем цвет текста */
}

/* Стиль для наведения на кнопку */
input[type="radio"]+label:hover,
input[type="checkbox"]+label:hover {
  background-color: #999;
  /* Меняем цвет фона */
  color: white;
  /* Меняем цвет текста */
}

/* Стиль для фигуры */
#shape {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: yellow;
}

/* Стиль для меню */
#menu {
  list-style-type: none;
  /* Убираем маркеры списка */
  margin: 0;
  /* Обнуляем отступы */
  padding: 0;
  /* Обнуляем отступы */
  overflow: hidden;
  /* Скрываем переполнение контента */
  background-color: #333;
  /* Задаем цвет фона */
}

Results: