1
....
<input name='category' value='1' type='radio' />
<input name='category' value='2' type='radio' />

<div>
  <span data-value="1" >...</span>
  <span data-value="2" >...</span>
  <span data-value="2" >...</span>
  <span data-value="1" >...</span>
</div>

....

Возможно ли выбирать элементы на странице, в зависимости от активной радио кнопки?

Внутри div могут находиться сколько угодно span, а так же до div может находиться сколько угодно input. Суть проблемы - выбрать все span, у которых data-value будет равен value активной кнопки. Необходимо решить этот вопрос без JS, на чистом CSS. Конечно, если есть варианты через любой другой способ - тоже идёт. Главное - максимально гибко. Чтобы каждое новое значение value не влекло за собой огромное кол-во кода

4
  • На js это и будет максимально гибкий способ без огромного кол-ва кода. Осмелюсь предположить что на css, на данный момент, невозможно сделать какой-либо "выбор" по значению атрибута
    – InDevX
    3 дек 2020 в 7:19
  • На CSS прекрасно выбираются элементы по значению атрибута. Но его надо указать (целиком или частично), а передавать value из другого элемента не получится. 3 дек 2020 в 7:24
  • Имел ввиду именно "динамический" выбор, т.е. с передачай параметров
    – InDevX
    3 дек 2020 в 7:30
  • Пытался в селекторы передать переменные, но не видит, или я что-то не так делаю. Видимо, придётся городить строки
    – Bakugodc
    3 дек 2020 в 8:33

3 ответа 3

1

Пример:

input[value="1"]:checked~div>span[data-value="1"] {
  color: red;
}

input[value="2"]:checked~div>span[data-value="2"] {
  color: red;
}
<form>
  <input name='category' value='1' type='radio' />
  <input name='category' value='2' type='radio' />

  <div>
    <span data-value="1" >"1"</span>
    <span data-value="2" >"2"</span>
    <span data-value="2" >"2"</span>
    <span data-value="1" >"1"</span>
  </div>
</form>

1
  • 1
    Эх, так и делал) Спасибо за ответ!
    – Bakugodc
    3 дек 2020 в 8:37
0

Чем вас не устраивает js?

const highlight = (evt) => {
  document.querySelectorAll('div span').forEach( el => { 
    el.classList.remove('highlight');
    if (el.dataset.value === evt.target.value) {
      el.classList.add('highlight');
    }
  });
};

document.querySelectorAll("[name='category']").forEach(e => e.onchange = highlight);
.highlight {
  border: 2px solid red;
}
<input name='category' value='1' type='radio' />
<input name='category' value='2' type='radio' />
<input name='category' value='3' type='radio' />
<input name='category' value='4' type='radio' />

<div>
  <span data-value="1" >...1</span>
  <span data-value="2" >...2</span>
  <span data-value="2" >...2</span>
  <span data-value="3" >...3</span>
  <span data-value="1" >...1</span>
  <span data-value="4" >...4</span>
</div>

1
  • Меня абсолютно полностью устраивает JS. Требования такие - что поделать )
    – Bakugodc
    3 дек 2020 в 8:34
0

На чистом CSS можно, но гибкостью там и не пахнет. Для каждого value/data-value понадобится добавить селектор.

[value="1"]:checked~div [data-value="1"],
[value="2"]:checked~div [data-value="2"],
[value="10"]:checked~div [data-value="10"],

/* и так для каждой value */

[value="100500"]:checked~div [data-value="100500"] {
  background-color: coral;
}
<input name='category' value='1' type='radio' />
<input name='category' value='2' type='radio' />

<div>
  <span data-value="1">data-value = 1</span>
  <span data-value="2">data-value = 2</span>
  <span data-value="2">data-value = 2</span>
  <span data-value="1">data-value = 1</span>
</div>

Для гибкости придется таки использовать JS. Но можно оптимизировать скрипт так, чтобы не перебирать все элементы и не проставлять все классы (будет производительнее). Например, что-то вроде этого алгоритма:

0. Добавить тег <style> в код
1. Отловить onChange на радиокнопках
2. брать value выбранной радиокнопки и, например, передавать ее параметром в JS-функцию foo(the_value)
3. Изменить innerHTML тега <style> на конструкцию типа '[value="'+the_value+'"]:checked~div [data-value="'+the_value+'"] {background-color: coral;}

Так нужно будет дернуть один элемент, а не пробегать по циклу все.

1
  • Спасибо за ответ! К сожалению по требованию не могу использовать JS. Так бы не писал сюда по такому пустяку)
    – Bakugodc
    3 дек 2020 в 8:35

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.