Как сделать фильтр?

Question

[DarkByte2015]

Есть примерно такой код:

<div>
	<input type="checkbox" id="condition">
</div>
<div>
	<div condition="true">condition</div>
	<div condition="false">condition</div>
</div>

Нужен как бы фильтр. Если чекбокс выбран, то показывать только элементы с condition="true", а если не выбран то показывать все элементы. Никак не придумаю как это реализовать. Думаю только что по любому это можно без JS реализовать через селекторы и display: none. Никак селектор не могу составить. Помогите пожалуйста.

Comments

[Kovalsky]

Вынесите чекбокс на уровень выше, чтобы контейнер с элементами был с ним на одном уровне. Вместо кастомного атрибута condition используйте класс. Если чекбокс активен (:checked) скрывайте лишние элементы.

[DarkByte2015]

Никита Полевой: Не выйдет, я использую bootstrap для чекбоксов (да и для всего остального), а там надо делать div с классом checkbox, в него вкладывается label со вложенным input.

Answer 1

[AlexRas]

Только если как-то так:
https://jsfiddle.net/xxhphzqL/1/

С разметкой как в примере без js не обойтись

Comments

[AlexRas]

Или на js https://jsfiddle.net/xxhphzqL/2/

[DarkByte2015]

Но тут другой уровень вложенности. Не совсем то. Да и вообще у меня тут чекбокс с правой стороны (там я для примера просто с левой привел, не думал что разница будет), а значит селектор + не будет работать.

[Kovalsky]

DarkByte2015: если CSS, то чекбокс должен быть выше или на том же уровне что и элементы. Мне кажется. Так что путь один - простенький js)

[DarkByte2015]

Никита Полевой: Ну ладно придется JS заюзать. :(

Answer 2

[Omen66613]

Если изменить разметку на что-то подобное:

<div>
  <input type="checkbox" id="condition">

  <div condition="true">condition</div>
  <div condition="false">condition</div>
</div>

получится сделать так

div[condition] {display: none;}
#condition:checked ~ div[condition="true"] {display: block;}
#condition:not(:checked) ~ div[condition="false"] {display: block;}

Answer 3

[Archakov Dennis]

Я бы тебе посоветовал юзать AngularJS или любой другой фреймворк. Если такие задачи будут повторяться. А так:

<div>
  <input onclick="hideCondition(event)" type="checkbox" id="condition">
</div>
<div>
  <div condition="true">condition</div>
  <div condition="false">condition</div>
</div>

function hideCondition(e) {
    $('div[condition]').hide();
	if (e.target.checked) $('div[condition="true"]').show();
}

Comments

[DarkByte2015]

Нет, мне единично надо один раз это сделать и ангуляр тут вообще не сдался. Неужели без JS не обойтись? Задача то вроде не сложная... Скрыть элемент по условию. Эх...

[Archakov Dennis]

DarkByte2015: если не сложная, так что тут задавать вопросы? Вам все кто смог ответили и дали решение, а Вы, извините, выделываетесь тут. Пойдите и читайте доку по CSS, раз уверены, что без JS можно это сделать. Такое ощущение, будто вы платите за правильное решение

[DarkByte2015]

Im Archakov: Че за наезды сразу а? Мне казалось что это можно сделать без JS, но раз нет то ладно. Не надо меня посылать читать доки. Мля как же бесят такие умники. Я сам знаю что мне читать, а что нет.