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

ProgramBox

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

Post author:admin
Запись опубликована:6 мая, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Как изменить стиль флажков при нажатии на одно из списка, неактивные меняют стиль? При нажатии на флажок выдается класс sf-option-active. Как css может быть изменен другими?

Изначально подсвечиваются все элементы, при нажатии на один флажок другие затемняются

 <ul data-operator="or" class="list">
  <li class="sf-level-0 sf-item-29" data-sf-count="19" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="tehobor" name="_sft_tip[]" id="sf-input-fc6224670cc95e4fdecf6cc456d08c36">
    <label class="sf-label-checkbox" for="sf-input-fc6224670cc95e4fdecf6cc456d08c36">Name1</label></li>

  <li class="sf-level-0 sf-item-30 sf-option-active" data-sf-count="6" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="konveiri" name="_sft_tip[]" checked="checked" id="sf-input-868176859db7cbdd316babead1c4a6ca"><label class="sf-label-checkbox" for="sf-input-868176859db7cbdd316babead1c4a6ca">Name2</label></li>

  <li class="sf-level-0 sf-item-31" data-sf-count="8" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="prolinii" name="_sft_tip[]" id="sf-input-080920625a50faa6f70e10891e88ebaa"><label class="sf-label-checkbox" for="sf-input-080920625a50faa6f70e10891e88ebaa">Name3</label></li>

  <li class="sf-level-0 sf-item-32" data-sf-count="4" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="neitrobor" name="_sft_tip[]" id="sf-input-df092a05d0048b1297780b8683077cb1"><label class="sf-label-checkbox" for="sf-input-df092a05d0048b1297780b8683077cb1">Name4</label></li>
</ul>

1. Может быть, вам нужны переключатели вместо флажков

2. radiobutton не отключается при повторном нажатии..

3. Вопрос действительно неясен, и формулировка трудночитаема, например, «неактивные меняют стиль»? Пожалуйста, проясните вопрос, если вы хотите, чтобы можно было выбрать только один, radiobutton — правильный способ сделать это. Вы можете отключить радиокнопки после выбора, если это необходимо.

4. Добавлено изображение. Когда все флажки неактивны, все они подсвечиваются, когда вы нажимаете, например, на 1 флажок, остальные затемняются

Ответ №1:

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

 $(".sf-input-checkbox").on("click", (e) => {
  if(e.target.checked) {
    $(".sf-input-checkbox").not($(e.target)).prop('checked', false);;
    $(".sf-label-checkbox").not($(e.target).next()).addClass("dimmed");
    $(e.target).next().removeClass("dimmed");
  } else {
    $(".sf-label-checkbox").removeClass("dimmed");
  }
});

 .dimmed {
  color: lightgray;
}

.hidden {
  display: none;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul data-operator="or" class="list">
  <li class="sf-level-0 sf-item-29" data-sf-count="19" data-sf-depth="0">
    <input class="sf-input-checkbox hidden" type="checkbox" value="tehobor" name="_sft_tip[]" id="sf-input-fc6224670cc95e4fdecf6cc456d08c36">
    <label class="sf-label-checkbox" for="sf-input-fc6224670cc95e4fdecf6cc456d08c36">Name1</label>
  </li>

  <li class="sf-level-0 sf-item-30 sf-option-active" data-sf-count="6" data-sf-depth="0">
    <input class="sf-input-checkbox hidden" type="checkbox" value="konveiri" name="_sft_tip[]" id="sf-input-868176859db7cbdd316babead1c4a6ca">
    <label class="sf-label-checkbox" for="sf-input-868176859db7cbdd316babead1c4a6ca">Name2</label>
  </li>

  <li class="sf-level-0 sf-item-31" data-sf-count="8" data-sf-depth="0">
    <input class="sf-input-checkbox hidden" type="checkbox" value="prolinii" name="_sft_tip[]" id="sf-input-080920625a50faa6f70e10891e88ebaa">
    <label class="sf-label-checkbox" for="sf-input-080920625a50faa6f70e10891e88ebaa">Name3</label>
  </li>

  <li class="sf-level-0 sf-item-32" data-sf-count="4" data-sf-depth="0">
    <input class="sf-input-checkbox hidden" type="checkbox" value="neitrobor" name="_sft_tip[]" id="sf-input-df092a05d0048b1297780b8683077cb1">
    <label class="sf-label-checkbox" for="sf-input-df092a05d0048b1297780b8683077cb1">Name4</label>
  </li>
</ul>

1. Вы используете checkbox И JS для HTML (радио!!! и задание css)… Это совсем не хорошо

2. Вы не можете отменить выбор переключателя и получить исходное состояние (4 отмененных). Это решение не допускает выбора. Но я согласен, что это можно было бы сделать с помощью vanillajs, по крайней мере, если OP не использует библиотеку jquery.

3. Хорошая уловка, я не видел состояние «отменить выбор»

4. Из-за загрузки Ajax не добавляется класс, можно ли как-то отследить изменение класса sf-option-active?

5. Вы можете использовать любую структуру данных для хранения изменений. Базового объекта или простой строки для текущего входного значения, которое проверяется, может быть достаточно. Просто восстановите отмеченное значение после загрузки ajax. let currentVal = e.target.value;

Ответ №2:

Для этого вам не нужен никакой JS. Вместо этого вы можете просто сказать в CSS:

Для каждой метки, которая находится ПОСЛЕ флажка: поставьте ее серой ( .moo span )

Для каждой метки, которая НАХОДИТСЯ ПОСЛЕ УСТАНОВЛЕННОГО флажка: поставьте ее черной ( .moo:checked span )

 .moo   span {
  color: #AAA;
}
.moo:checked   span {
  color: #000;
}

 <input type='radio' name="moo" class="moo"><span>1111</span><br/>
<input type='radio' name="moo" class="moo"><span>2222</span><br/>
<input type='radio' name="moo" class="moo"><span>3333</span><br/>
<input type='radio' name="moo" class="moo"><span>4444</span>

С помощью немного большего количества кода вы можете связать метку с флажком и (почему бы и нет) скрыть флажок:

 .moo {
      visibility: hidden;
    }
    .moo   label {
      color: #AAA;
      cursor: pointer;
    }
    .moo:checked   label {
      color: #000;
    }

 <div>
  <input type='radio' name="moo" id="c1" class="moo">
  <label for="c1">1111</label>
</div>
<div>
  <input type='radio' name="moo" id="c2" class="moo">
  <label for="c2">2222</label>
</div>
<div>
  <input type='radio' name="moo" id="c3" class="moo">
  <label for="c3">3333</label>
</div>
<div>
  <input type='radio' name="moo" id="c4" class="moo">
  <label for="c4">4444</label>
</div>

ОБНОВЛЕНО с помощью radio вместо checkbox