Как создать функцию повторения действий, которая будет работать с чекбоксами для разных блоков на веб-странице? 

Как мне интегрировать два визуально различных блока тарифов — один крупнее для выделения, а второй поменьше — в повторяющуюся структуру? Рассматриваю возможность использования чекбокса внутри повторителя, так что при его активации будет добавляться большой блок, а при выборе другого элемента — маленький блок. Это правильный подход или существуют альтернативные решения для реализации такой задачи?
  • 4 декабря 2023 г. 17:25
Ответы на вопрос 1 
Это может быть реализовано с помощью JavaScript (или его фреймворков, таких как Vue.js, React.js, Angular и т.д.), где состояние каждого чекбокса можно контролировать, и в зависимости от этого состояния, на страницу добавляться соответствующий блок с тарифом. В рамках чистого JavaScript вы можете использовать метод `querySelector` для нахождения элементов и `addEventListener` для отслеживания событий изменения состояния чекбоксов.

Ниже пример простой реализации на чистом JavaScript:

HTML:
```html
<div id="tariffs">
  <!-- Тариф 1 -->
  <label>
    <input type="checkbox" name="tariff" value="big" class="tariff-checkbox"> Тариф Большой
  </label>

  <!-- Тариф 2 -->
  <label>
    <input type="checkbox" name="tariff" value="small" class="tariff-checkbox"> Тариф Маленький
  </label>
</div>

<div id="selected-tariffs"></div>
```

CSS:
```css
.tariff-big {
  /* Стили для большого блока тарифа */
  width: 300px;
  height: 200px;
  background-color: #cae8ca;
  margin-bottom: 10px;
}

.tariff-small {
  /* Стили для маленького блока тарифа */
  width: 200px;
  height: 150px;
  background-color: #ececec;
  margin-bottom: 10px;
}
```

JavaScript:
```javascript
document.querySelectorAll('.tariff-checkbox').forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    updateSelectedTariffs();
  });
});

function updateSelectedTariffs() {
  const selectedTariffs = document.getElementById('selected-tariffs');
  selectedTariffs.innerHTML = ''; // Очистить текущие выбранные тарифы

  document.querySelectorAll('.tariff-checkbox:checked').forEach(function(checkbox) {
    const tariffType = checkbox.value;
    const div = document.createElement('div');
    if (tariffType === 'big') {
      div.className = 'tariff-big';
      div.innerHTML = 'Большой тариф';
    } else if (tariffType === 'small') {
      div.className = 'tariff-small';
      div.innerHTML = 'Маленький тариф';
    }
    selectedTariffs.appendChild(div);
  });
}
```

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

Здесь же стоит обратить внимание, что если вы используете чекбоксы для единственного выбора, возможно вам подойдет использовать `radio` кнопки, так как они предназначены для выбора одного варианта из множества, и управлять ими будет проще с точки зрения логики.

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