Показать / скрыть вещи в соответствии с флажками с помощью CSS: почему этот код не работает?

Question

Пользователь GGG любезно дал мне пример того, как показать и скрыть вещи с помощью CSS (это здесь ).

Но когда я попыталсяадаптировать его к моему сайту не удалось.Вот как я его изменил .

Дело в том, что каждый флажок имеет идентификатор css, и каждый должен показывать разные вещи при проверке.У материала, который показывает / скрывает, есть класс css, и он не смежен с флажком ( пример ).

Как я могу адаптировать этот код?То, что я пробовал, до сих пор не сработало ...

Ваше понимание будет очень высоко оценено!Спасибо !!

Розамунда

Answer 1

DEMO обновлен для использования общего селектора брата вместо смежного селектора брата

CSS:

/*styled relative to the label*/
label {display:block;}
label ~ input[type="checkbox"] ~ div {display:none; margin-left:1em;}
label ~ input[type="checkbox"]:checked ~ div {display:inline;}​

HTML:

<label>Box 1:</label>
<input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-131" type="checkbox">
<div class="tipo-uf-131">Box 1 is checked.</div>
<br>

<label>Box 2:</label>
<input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-134" type="checkbox">
<div class="tipo-uf-134">Box 2 is checked.</div>
<br>

<label>Box 3:</label>
<input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-130" type="checkbox">
<div class="tipo-uf-130">Box 3 is checked.</div>​

Answer 2

Это не работает, вы должны поместить каждый ответ в деление следующим образом:

<style>
label {display:block;}
label ~ input[type="checkbox"] ~ div {display:none; margin-left:1em;}
label ~ input[type="checkbox"]:checked ~ div {display:inline;}​
</style>
<div>
<label>Box 1:</label>
<input class="form-checkbox" type="checkbox">
<div>Box 1 is checked.</div>
</div>
<div>
<label>Box 2:</label>
<input class="form-checkbox" type="checkbox">
<div>Box 2 is checked.</div>
</div>
<div>
<label>Box 3:</label>
<input class="form-checkbox" type="checkbox">
<div>Box 3 is checked.</div>​
</div>