Активное состояние для меток переключателей без значения

ProgramBox

Активное состояние для меток переключателей без значения

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

#jquery #css

Вопрос:

У меня есть CMS, которая выводит переключатели без поля значений. Я думаю, что я мог бы настроить таргетинг на каждое поле на основе его значения с помощью jQuery, чтобы назначить «активный» класс, но сейчас у меня нет такой возможности. Есть ли способ назначить и оформить «активный» элемент с помощью CSS или jQuery для этого? Пожалуйста, обратите внимание, что текущий CSS скрывает входные переключатели и отображает только метки. Таким образом, следует назначить активное состояние и стили для меток.

 <div class="form_responses">
<div class="form_response">
    <input id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_1" type="radio" data-text="Yes" name="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e" checked="checked" value="923518fd-e6ce-4989-8342-15d9b22e5a20" autocomplete="off" required="required" data-handler-change="1">
    <label for="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_1">Yes</label>
</div>
<div class="form_response">
    <input id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_2" type="radio" data-text="Undecided" name="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e" value="cff8e508-ba35-4e2b-99d6-fa375f1fc2da" autocomplete="off" required="required" data-handler-change="1">
    <label for="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_2">Undecided</label>
</div>

Вот живая демонстрация переключателей

 input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}
.form_response > label {
    cursor: pointer;
    display: block;
    background-color: #182B54;
    padding: 10px 20px;
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    margin-left: 0;
}
.form_response > label:hover {
    color: #182B54;
    background-color: #FED007;
}

 <div class="form_responses">
    <div class="form_response">
        <input id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_1" type="radio" data-text="Yes" name="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e" checked="checked" value="923518fd-e6ce-4989-8342-15d9b22e5a20" autocomplete="off" required="required" data-handler-change="1">
        <label for="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_1">Yes</label>
    </div>
    <div class="form_response">
        <input id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_2" type="radio" data-text="Undecided" name="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e" value="cff8e508-ba35-4e2b-99d6-fa375f1fc2da" autocomplete="off" required="required" data-handler-change="1">
        <label for="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_2">Undecided</label>
    </div>
</div>

Развернуть фрагмент

Ответ №1:

Вы можете использовать CSS для оформления метки, которая сразу следует (как родственная) за любым радио, имеющим этот атрибут checked="checked" . Это все, что вам нужно добавить:

 input[type='radio'][checked='checked'] label {
  background: red;
}

Приведенный выше CSS находит все входные данные типа radio с атрибутом checked=»проверено» и применяет стиль, если следующим тегом, который следует за этим элементом, является a label . В вашем примере это все, что вам нужно, чтобы заставить стиль работать.

Если вам также нужна jquery функция, помогающая переключать переключатели, я добавил это. Мне пришлось догадаться, как ваш код идентифицирует разные элементы, потому что вы предоставили весь HTML. Это может потребовать адаптации в зависимости от остальной части вашего HTML. При этом будут использоваться checked='checked' атрибуты параметров радио, но вы также можете раскомментировать некоторый код для добавления .active класса, если хотите (это необязательно, если вы используете css приведенный выше стиль.

Все jquery строки закомментированы.

 // Add click event to labels
$("label").click(function() {

  // Store the name of the radio 
  radioName = $(this).attr("for")

  // Remove radio specific identifier (i.e. _1) to get form name 
  formName = radioName.substring(0, radioName.length - 2);

  // Remove all checked attributes from radio buttons who are wrapped in the .radio-group
  $("input[type='radio'][name='"   formName   "']").removeAttr("checked");

  // Uncomment the line below if you want to use an active class name
  // $("input[type='radio'][name='"   formName  "']").removeClass("active");

  // Find 'for' attribute
  labelFor = $(this).attr("for");

  // Add checked attribute to the clicked radio
  $("input#"   labelFor).attr("checked", "checked");

  // Uncomment the line below if you want to use an active class name
  // $("input#"   labelFor).addClass("active");


});

 input[type='radio'][checked='checked'] label {
  background: red;
}

input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.form_response>label {
  cursor: pointer;
  display: block;
  background-color: #182B54;
  padding: 10px 20px;
  font-size: 18px;
  color: #fff;
  font-weight: 500;
  margin-left: 0;
}

.form_response>label:hover {
  color: #182B54;
  background-color: #FED007;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="<form id=" form_3c0cb7b9-a09a-4a95-be27-e27923448c8e ">
<div class="form_response ">
    <input id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_1 " type="radio " data-text="Yes " name="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e " checked="checked " value="923518fd-e6ce-4989-8342-15d9b22e5a20 " autocomplete="off " required="required
  " data-handler-change="1 ">
    <label for="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_1 ">Yes</label>
  </div>
  <div class="form_response ">
    <input id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_2 " type="radio " data-text="Undecided " name="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e " value="cff8e508-ba35-4e2b-99d6-fa375f1fc2da " autocomplete="off " required="required
  " data-handler-change="1 ">
    <label for="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_2 ">Undecided</label>
  </div>
</form>
<form id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8f ">
  <div class="form_response ">
    <input id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8f_3 " type="radio " data-text="Yes " name="form_3c0cb7b9-a09a-4a95-be27-e27923448c8f " checked="checked " value="923518fd-e6ce-4989-8342-15d9b22e5a20 " autocomplete="off " required="required
  " data-handler-change="1 ">
    <label for="form_3c0cb7b9-a09a-4a95-be27-e27923448c8f_3 ">Yes</label>
  </div>
  <div class="form_response ">
    <input id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8f_4 " type="radio " data-text="Undecided " name="form_3c0cb7b9-a09a-4a95-be27-e27923448c8f " value="cff8e508-ba35-4e2b-99d6-fa375f1fc2da " autocomplete="off " required="required
  " data-handler-change="1 ">
    <label for="form_3c0cb7b9-a09a-4a95-be27-e27923448c8f_4 ">Undecided</label>
  </div>
</form>

Развернуть фрагмент

1. Оливер, спасибо за конкретное объяснение. CMS не допускает никаких изменений в разметке, она выводит переключатели точно так, как показано в моем коде. Могу ли я применить checked=»проверено» с помощью jQuery при нажатии на метку? А затем применить свой код поверх этого? Я пробовал это, но не могу найти способ настроить таргетинг на щелчок по метке.

2.Я обновил свой ответ, чтобы изменить checked атрибут в зависимости от label clicks . Вы должны быть в состоянии адаптировать это к вашим потребностям