отображение контейнера div при выбранном чек-боксе по id

Question

Пытаясь разгрузить страницу сайта, я поместил часть элементов в div'ы с display: none. Для каждого такого контейнера на странице есть checkbox. Предполагалось, что при выборе соответствующего чек-бокса будет отображаться контейнер с дополнительными элементами. Таких пар "контейнер-чекбокс" на странице несколько десятков, поэтому хочется переключить свойство display: block по id конкретного контейнера. В HTML:

<table>
<tr>
                    <th>
                        <div class="hiddenDiv" id="preaurisRight"> </div>
                    </th>
                    <th>
                        <input type="checkbox" name="lymphNodes" id="cBoxPreaurisRight"> <Br>
                    </th>
                    <th><input type="checkbox" name="lymphNodes" id="cBoxPreaurisLeft"> <Br></th>
                    <th>
                        <div class="hiddenDiv" id="preaurisLeft"></div>
                    </th>
                </tr>                  
</table>

В CSS:

.hiddenDiv{
    display: none;
}

На сайте есть решения похожих проблем, но мне не удается переделать их в доступ к конкретным контейнерам по их id

Answer 1

Задача решается с помощью псевдокласса :has(). Нужно помнить, что для каждой пары необходимо будет добавить свой селектор в правило Show:

table { border: 1px solid #f00; }
th { border: 1px solid #090; }

.hiddenDiv { display: none; }

/* Show */
table:has(#cBoxPreaurisRight_1:checked) #preaurisRight_1,
table:has(#cBoxPreaurisLeft_1:checked) #preaurisLeft_1,
table:has(#cBoxPreaurisRight_2:checked) #preaurisRight_2,
table:has(#cBoxPreaurisLeft_2:checked) #preaurisLeft_2 {
  display: block;
}

<table>
  <tr>
    <th><div class="hiddenDiv" id="preaurisRight_1">RIGHT_1</div></th>
    <th><input type="checkbox" id="cBoxPreaurisRight_1" name="lymphNodes"><br></th>
    <th><input type="checkbox" id="cBoxPreaurisLeft_1" name="lymphNodes"><br></th>
    <th><div class="hiddenDiv" id="preaurisLeft_1">LEFT_1</div></th>
  </tr>
  <tr>
    <th><div class="hiddenDiv" id="preaurisRight_2">RIGHT_2</div></th>
    <th><input type="checkbox" id="cBoxPreaurisRight_2" name="lymphNodes"><br></th>
    <th><input type="checkbox" id="cBoxPreaurisLeft_2" name="lymphNodes"><br></th>
    <th><div class="hiddenDiv" id="preaurisLeft_2">LEFT_2</div></th>
  </tr>
</table>

Учитывая что таких пар может быть несколько десятков (или неопределённое количество), такой подход сильно увеличит объём кода и вероятность ошибок. Я рекомендовал бы использовать JS:

const TABLE = document.querySelector('table');
TABLE.addEventListener('change', (ev) => {
  const TARGET = ev.target;
  if (TARGET.name == 'lymphNodes') {
    const DIV_ID = TARGET.id.replace('cBox', '').replace(/^./i, (str) => {
      return str.toLowerCase()
    });
    TABLE.querySelector(`#${DIV_ID}`).classList.toggle('show', TARGET.checked);
  }
});

table { border: 1px solid #f00; }
th { border: 1px solid #090; }

.hiddenDiv { display: none; }

.hiddenDiv.show { display: block; }

<table>
  <tr>
    <th><div class="hiddenDiv" id="preaurisRight_1">RIGHT_1</div></th>
    <th><input type="checkbox" id="cBoxPreaurisRight_1" name="lymphNodes"><br></th>
    <th><input type="checkbox" id="cBoxPreaurisLeft_1" name="lymphNodes"><br></th>
    <th><div class="hiddenDiv" id="preaurisLeft_1">LEFT_1</div></th>
  </tr>
  <tr>
    <th><div class="hiddenDiv" id="preaurisRight_2">RIGHT_2</div></th>
    <th><input type="checkbox" id="cBoxPreaurisRight_2" name="lymphNodes"><br></th>
    <th><input type="checkbox" id="cBoxPreaurisLeft_2" name="lymphNodes"><br></th>
    <th><div class="hiddenDiv" id="preaurisLeft_2">LEFT_2</div></th>
  </tr>
  <tr>
    <th><div class="hiddenDiv" id="preaurisRight_56">RIGHT_56</div></th>
    <th><input type="checkbox" id="cBoxPreaurisRight_56" name="lymphNodes"><br></th>
    <th><input type="checkbox" id="cBoxPreaurisLeft_56" name="lymphNodes"><br></th>
    <th><div class="hiddenDiv" id="preaurisLeft_56">LEFT_56</div></th>
  </tr>
  <tr>
    <th><div class="hiddenDiv" id="preaurisRight_мильярд">RIGHT_мильярд</div></th>
    <th><input type="checkbox" id="cBoxPreaurisRight_мильярд" name="lymphNodes"><br></th>
    <th><input type="checkbox" id="cBoxPreaurisLeft_мильярд" name="lymphNodes"><br></th>
    <th><div class="hiddenDiv" id="preaurisLeft_мильярд">LEFT_мильярд</div></th>
  </tr>
</table>

БЛОГ НА HUSL

отображение контейнера div при выбранном чек-боксе по id

Ответы (1 шт):