@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. Никак селектор не могу составить. Помогите пожалуйста.
  • Вопрос задан
  • 478 просмотров
Решения вопроса 1
@AlexRas
Только если как-то так:
https://jsfiddle.net/xxhphzqL/1/

С разметкой как в примере без js не обойтись
Ответ написан
Пригласить эксперта
Ответы на вопрос 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;}
Ответ написан
Комментировать
archakov06
@archakov06
Frontend-разработчик (ReactJS)
Я бы тебе посоветовал юзать 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();
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы