Как скрыть элементы с помощью css, используя флажки: разные выходные данные в зависимости от идентификатора элемента или класса?

Question

У меня есть этот код , который должен показывать и скрывать выходные данные элемента в соответствии с определенными флажками.

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

Как они могут быть нацелены с использованием определенных идентификаторов CSS?

Я имею в виду, когда вы нажимаете на каждое поле, должен отображаться только текст, который ссылается на это конкретное поле, ине все из них.

Спасибо за понимание !!

Розамунда

Answer 1

ДЕМО

/*styled relative to the label*/
label {display:block;}
label ~ div {display:none; margin-left:1em;}

/*targetting*/
/*boxes with id having this number will style a sibling div with this number*/
input[type="checkbox"][id*="131"]:checked ~ div[class*="131"] {display:inline;}
input[type="checkbox"][id*="134"]:checked ~ div[class*="134"] {display:inline;}
input[type="checkbox"][id*="130"]:checked ~ div[class*="130"] {display:inline;}

Answer 2

Это близко к идеальному примеру продумывания вещей и слишком сильной зависимости от CSS.Предполагается, что таблицы стилей отвечают за презентацию , а не функциональность .Селекторы CSS могут быть достаточно сложными, чтобы вы могли использовать их для проверочных проверок - хотя это не является хорошей идеей:)

Вам гораздо лучше полагаться на javascript для достижения этой цели и в конечном итоге вы получитеболее широкая матрица поддержки браузера.Немного измените разметку:

<label>Box 1:</label> <input class="form-checkbox" id="cb131" type="checkbox"/>
...<input class="form-checkbox" id="cb134" type="checkbox"/>
...<input class="form-checkbox" id="cb130" type="checkbox"/>
<div id="cb131-linked"><b>Box 1 is checked.</b></div>
<div id="cb134-linked">...</div>
<div id="cb130-linked">...</div>

... и вы можете добавить слушатель jQuery, чтобы при переключении состояния флажка вы могли отображать связанные элементы div следующим образом:

$checkboxes = $(".form-checkbox");
$checkboxes.change(function(){
    console.log("changed");
    $checkboxes.each(function(){
        $this = $(this)
        $("#"+$this.attr("id")+"-linked").toggle($this.is(":checked"));
    });
});​

Fiddle: http://jsfiddle.net/9t59j/11/

Кроме того, входы должны быть самозакрывающимися элементами.

Answer 3

Вы можете использовать селектор *=. Я не уверен, какая у него совместимость с браузерами, но у меня это работает в Chrome. Например, изменение CSS для первого из трех флажков выглядит следующим образом:

input[id*="131"]:checked ~ div[class="tipo-uf-131"] {display:inline;}