При выборе radio показывать нужный раздел

Рейтинг: 0Ответов: 1Опубликовано: 06.04.2023

Хоть убейтесь, не выходит у меня на radio button назначить скрытие ненужного столбца в таблице Нужно выбирать часовой пояс и именно время этого часового пояса будет отображаться в таблице

 <div class="radio-button">
    <label for="id-1">МСК</label>
    <input class="radio_option" type="radio" name="input_radio" id="id-1" checked >
    <label for="id-2">ЕКБ</label>
    <input class="radio_option" type="radio" name="input_radio" id="id-2" >
    <label for="id-3">ХБР</label>
    <input class="radio_option" type="radio" name="input_radio" id="id-3">
</div>
<div class="table">
    <table>
    <tbody class="elastic">
        <tr>
            <td>Мы работаем во столько</td>
            <td id="msk">9:00 до 20:00</td>
            <td id="ekb">7:00 до 18:00</td>
            <td id="hbr">5:00 до 14:00</td>
        </tr>

Хочу через CSS задать скрывание не нужных мне столбцов, пытался по этому коду, но чёт как то безуспешно, и даже нагуглить не выходит :(

 #msk,#ekb,#hbr {
    display: none;
}

#id-1:checked ~ #msk,
#id-2:checked ~ #ekb,
#id-3:checked ~ #hbr {
    display: block;
}
css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Ничего удивительного, если перевести ваши селекторы на русский язык, то проблема станет сразу ясна:

Если есть элемент с id "id-1" и на нём нажата галочка, тогда элементу после него с id "msk", ИЛИ
Если есть элемент с id "id-2" и на нём нажата галочка, тогда элементу после него с id "ekb", ИЛИ
Если есть элемент с id "id-3" и на нём нажата галочка, тогда элементу после него с id "hbr",
применить следующие стили: {
    display: block;
}

То есть чтобы селекторы заработали у вас должна быть вот такая разметка:

#msk,
#ekb,
#hbr {
  display: none;
}

#id-1:checked ~ #msk,
#id-2:checked ~ #ekb,
#id-3:checked ~ #hbr {
  display: block;
}
<div class="radio-button">
  <label for="id-1">МСК</label>
  <input class="radio_option" type="radio" name="input_radio" id="id-1" checked>
  <label for="id-2">ЕКБ</label>
  <input class="radio_option" type="radio" name="input_radio" id="id-2">
  <label for="id-3">ХБР</label>
  <input class="radio_option" type="radio" name="input_radio" id="id-3">
  <span id="msk">9:00 до 20:00</span>
  <span id="ekb">7:00 до 18:00</span>
  <span id="hbr">5:00 до 14:00</span>
</div>

<div class="table">
  <table>
    <tbody class="elastic">
      <tr>
        <td>Мы работаем во столько</td>
      </tr>
    </tbody>
  </table>
</div>

Так что исправляем селекторы и разметку, чтобы получилось вот так:

#msk,
#ekb,
#hbr {
  display: none;
}

#id-1:checked ~ .table #msk,
#id-2:checked ~ .table #ekb,
#id-3:checked ~ .table #hbr {
  display: block;
}
<label for="id-1">МСК</label>
<input class="radio_option" type="radio" name="input_radio" id="id-1" checked>
<label for="id-2">ЕКБ</label>
<input class="radio_option" type="radio" name="input_radio" id="id-2">
<label for="id-3">ХБР</label>
<input class="radio_option" type="radio" name="input_radio" id="id-3">

<div class="table">
  <table>
    <tbody class="elastic">
      <tr>
        <td>Мы работаем во столько</td>
        <td id="msk">9:00 до 20:00</td>
        <td id="ekb">7:00 до 18:00</td>
        <td id="hbr">5:00 до 14:00</td>
      </tr>
    </tbody>
  </table>
</div>

В итоге, если также переводить на русский язык, то получается что-то такое:

Если есть элемент с id "id-1" и на нём нажата галочка, тогда элементу с id "msk", который является ребёнком элемента с классом "table", ИЛИ
Если есть элемент с id "id-2" и на нём нажата галочка, тогда элементу с id "ekb", который является ребёнком элемента с классом "table", ИЛИ
Если есть элемент с id "id-2" и на нём нажата галочка, тогда элементу с id "hbr", который является ребёнком элемента с классом "table",
применить следующие стили {
  display: block;
}

Вариант на JavaScript где не придётся убирать элемент(ы)

class ShowById {
  static init(radioButtonParent) {
    let radioButtons = radioButtonParent.children // Сохраняем детей родителя

    showElemsIfChecked() // Запускаем проверку изначально

    function showElemsIfChecked() {
      for (let i = 0; i < radioButtons.length; i++) {
        let radioButton = radioButtons[i] // Текущая кнопка

        radioButton.addEventListener('change', showElemsIfChecked, { once: true, }) // Ставим слушатель событий, чтобы проверять элемент на изменение в будующем. Ставим `once: true` чтобы избежать утечки памяти

        if (radioButton.dataset && radioButton.dataset.showId) { // Проверяем есть ли нужный атрибут `data-show-id`
          let elemId = radioButton.dataset.showId // id элемента которого мы будем искать
          let elem = document.getElementById(elemId) // Сам элемент который будет скрываться/показываться

          if (elem) { // Проверяем есть ли элемент, чтобы не выскочила ошибка
            if (radioButton.checked) { // Если галочка нажата, показываем элемент
              elem.style.display = 'block'
            } else { // Иначе скрываем
              elem.style.display = 'none'
            }
          }
        }
      }
    }
  }
}

// Пример использования

let buttons = document.querySelector('.radio-button') // Родитель radio инпутов

ShowById
  .init(buttons)
#msk,
#ekb,
#hbr {
  display: none;
}
<div class="radio-button">
  <label for="id-1">МСК</label>
  <input class="radio_option" type="radio" name="input_radio" id="id-1" checked data-show-id="msk">
  <label for="id-2">ЕКБ</label>
  <input class="radio_option" type="radio" name="input_radio" id="id-2" data-show-id="ekb">
  <label for="id-3">ХБР</label>
  <input class="radio_option" type="radio" name="input_radio" id="id-3" data-show-id="hbr">
</div>

<div class="table">
  <table>
    <tbody class="elastic">
      <tr>
        <td>Мы работаем во столько</td>
        <td id="msk">9:00 до 20:00</td>
        <td id="ekb">7:00 до 18:00</td>
        <td id="hbr">5:00 до 14:00</td>
      </tr>
    </tbody>
  </table>
</div>