CSS - цвет фона li на отмеченном радио

Я застрял с этим кодом. Я хочу изменить цвет фона li, когда выбран соответствующий переключатель. См. Прилагаемую скрипку для демонстрации.

Можно ли обойтись без редактирования исходного html, поскольку он создается основным файлом, который я действительно не хочу редактировать?

.wc-deposits-wrapper .wc-deposits-option li {
  padding: .5em 1em;
  border: 1px solid #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  border-radius: 4px;
  box-sizing: border-box;
  width: 49%;
  margin: 0;
  float: left;
}

.wc-deposits-wrapper .wc-deposits-option {
  list-style: none outside;
  margin: 0;
  padding: 0 0 2px;
  overflow: hidden;
  font-size: 1em;
  line-height: 2em;
}

<div class = "wc-deposits-wrapper wc-deposits-optional">
  <ul class = "wc-deposits-option">
    <li>
      <input type = "radio" name = "wc_deposit_option" value = "yes" id = "wc- 
    option-pay-deposit">
      <label for = "wc-option-pay-deposit">
    Option 1    </label>
    </li>
    <li>
      <input type = "radio" name = "wc_deposit_option" value = "no" id = "wc-option- 
    pay-full" checked = "checked">
      <label for = "wc-option-pay-full">
    Option 2    </label>
    </li>
  </ul>
</div>

Заранее спасибо.

Возможный дубликат Смена переключателя css при нажатии

— 05.09.2018 22:38

javascript html css html-lists

05.09.2018 22:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

601

Перейти к ответу Данный вопрос помечен как решенный

Ответы 6

Используйте onclicks для каждого радиоэлемента

<div class = "wc-deposits-wrapper wc-deposits-optional">
  <ul class = "wc-deposits-option">
    <li>
      <input type = "radio" onclick = "toggleBackground(true)" name = "wc_deposit_option" value = "yes" id = "wc- 
option-pay-deposit">
        <label for = "wc-option-pay-deposit">
Option 1    </label>
    </li>
    <li>
      <input type = "radio" onclick = "toggleBackground(false)" name = "wc_deposit_option" value = "no" id = "wc-option- 
pay-full" checked = "checked">
        <label for = "wc-option-pay-full">
Option 2    </label> 
    </li>
   </ul>
</div>

Затем используйте следующий код js:

function toggleBackground(type) {
  if (type) {
    document.getElementById('wc-option-pay-deposit').style.background = 'color-1';
    document.getElementById('wc-option-pay-full').style.background = 'color-2';
  } else {
    document.getElementById('wc-option-pay-deposit').style.background = 'color-2';
    document.getElementById('wc-option-pay-full').style.background = 'color-1';
  }
}

Привет, Кевин. Спасибо за ответ. Можно ли обойтись без редактирования исходного html, поскольку он создается основным файлом, который я действительно не хочу редактировать?

— 05.09.2018 22:45

Да, вы можете добавить элементы onclick через js, используя selector.onclick = .... Я не особо разбирался с этим и не думаю, но возможно, что это может заставить вас создать две отдельные функции. . К тому же это не самый эффективный способ делать что-то.

— 05.09.2018 22:49

05.09.2018 22:38

Добавить :checked для радио в css и background-color: #ff0000;

Контрольная работа

.wc-deposits-wrapper .wc-deposits-option li {
    padding: .5em 1em;
    border: 1px solid #ccc;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    border-radius: 4px;
    box-sizing: border-box;
    width: 49%;
    margin: 0;
    float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
    list-style: none outside;
    margin: 0;
    padding: 0 0 2px;
    overflow: hidden;
    font-size: 1em;
    line-height: 2em;
}

input[type=radio]:checked + label {
  background-color: #ff0000;
  font-style: normal;
} 

input[type=radio] + label {
  color: #ccc;
  font-style: italic;
}

<div class = "wc-deposits-wrapper wc-deposits-optional">
  <ul class = "wc-deposits-option">
    <li>
      <input type = "radio" name = "wc_deposit_option" value = "yes" id = "wc-option-pay-deposit">
        <label for = "wc-option-pay-deposit">
Option 1</label>
    </li>
    <li>
      <input type = "radio" name = "wc_deposit_option" value = "no" id = "wc-option-pay-full" checked = "checked">
        <label for = "wc-option-pay-full">
Option 2</label> 
    </li>
   </ul>
</div>

Привет, Нисарг. Спасибо за ответ. Кажется, это меняет фон метки вместо фона li.

— 05.09.2018 22:44

Хотя это лучший способ, чем мой, единственная проблема заключается в том, что в css нет родительских селекторов, поэтому невозможно получить li, используя только css

— 05.09.2018 22:53

05.09.2018 22:41

Поскольку @ kevin-lewis уже упоминал, что в css нет родительских селекторов, для того, чтобы иметь чистое решение css, нам нужно немного схитрить со стилем тега <label>, чтобы он заполнил весь родительский элемент <li> (используя абсолютный позиционирование) и имеет те же поля и границы. Единственный неудобный бит, который может работать ненадежно, - это левый отступ стилизованного <label> - он должен учитывать ширину переключателя - отсюда и «волшебство» 2.6em.

.wc-deposits-wrapper .wc-deposits-option li {
    padding: .5em 1em;
    border: 1px solid #ccc;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    border-radius: 4px;
    box-sizing: border-box;
    width: 49%;
    margin: 0;
    float: left;
    position: relative;
}
.wc-deposits-wrapper .wc-deposits-option {
    list-style: none outside;
    margin: 0;
    padding: 0 0 2px;
    overflow: hidden;
    font-size: 1em;
    line-height: 2em;
}

input:checked + label{
    display: inline-block;
    background-color: DodgerBlue;
    height: 100%;
    width: 100%;
    z-index: -1;
    padding: .5em 1em;
    padding-left: 2.6em;
    border: 1px transparent;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}

<div class = "wc-deposits-wrapper wc-deposits-optional">
  <ul class = "wc-deposits-option">
    <li>
      <input type = "radio" name = "wc_deposit_option" value = "yes" id = "wc-option-pay-deposit">
        <label for = "wc-option-pay-deposit">
Option 1</label>
    </li>
    <li>
      <input type = "radio" name = "wc_deposit_option" value = "no" id = "wc-option-pay-full" checked = "checked">
        <label for = "wc-option-pay-full">
Option 2</label> 
    </li>
   </ul>
</div>

05.09.2018 23:03

Ответ принят как подходящий

Полагаю, вам нужно изменить цвет родительского li. В данном случае я это делаю так.

let imps = Array.from(
  document.querySelectorAll(".wc-deposits-option [type='radio']")
);

imps.map((r) => {
  r.addEventListener("change", () => action(r));
  window.onload = (() => action(r));
});


function action(r){
// this function is called when the window loads & when a radio button is clicked
  imps.map( R => {R.parentElement.style.background = "white";})
  
    if (r.checked) {
      r.parentElement.style.background = "gold";
  } 
}

.wc-deposits-wrapper .wc-deposits-option li {
  padding: .5em 1em;
  border: 1px solid #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  border-radius: 4px;
  box-sizing: border-box;
  width: 49%;
  margin: 0;
  float: left;
}

.wc-deposits-wrapper .wc-deposits-option {
  list-style: none outside;
  margin: 0;
  padding: 0 0 2px;
  overflow: hidden;
  font-size: 1em;
  line-height: 2em;
}

<div class = "wc-deposits-wrapper wc-deposits-optional">
  <ul class = "wc-deposits-option">
    <li>
      <input type = "radio" name = "wc_deposit_option" value = "yes" id = "wc- 
    option-pay-deposit">
      <label for = "wc-option-pay-deposit">
    Option 1    </label>
    </li>
    <li>
      <input type = "radio" name = "wc_deposit_option" value = "no" id = "wc-option- 
    pay-full" checked = "checked">
      <label for = "wc-option-pay-full">
    Option 2    </label>
    </li>
  </ul>
</div>

Надеюсь, это то, что вам нужно.

ОБНОВИТЬ

Еще одно решение JavaScript - проверять радио, когда вы щелкаете <li>parent. Я думаю, что это более дружественно к пользовательскому интерфейсу.

let lis = Array.from(
  document.querySelectorAll(".wc-deposits-option li")
);

lis.map((li) => {
  li.addEventListener("click", () => action(li));
  window.onload = (() => action(li));
});

function action(li){
  lis.map((_li) => {_li.style.background = "white"});
  let thisRadio = li.querySelector("[type='radio']");
    thisRadio.checked = true;
    li.style.background = "gold"
}

.wc-deposits-wrapper .wc-deposits-option li {
  padding: .5em 1em;
  border: 1px solid #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  border-radius: 4px;
  box-sizing: border-box;
  width: 49%;
  margin: 0;
  float: left;
}

.wc-deposits-wrapper .wc-deposits-option {
  list-style: none outside;
  margin: 0;
  padding: 0 0 2px;
  overflow: hidden;
  font-size: 1em;
  line-height: 2em;
}

<div class = "wc-deposits-wrapper wc-deposits-optional">
  <ul class = "wc-deposits-option">
    <li>
      <input type = "radio" name = "wc_deposit_option" value = "yes" id = "wc- 
    option-pay-deposit">
      <label for = "wc-option-pay-deposit">
    Option 1    </label>
    </li>
    <li>
      <input type = "radio" name = "wc_deposit_option" value = "no" id = "wc-option- 
    pay-full" checked = "checked">
      <label for = "wc-option-pay-full">
    Option 2    </label>
    </li>
  </ul>
</div>

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

— 08.09.2018 16:49

Кол ᴸᴬᴢᴬᴿᵁᴤ Смит. Я обновил javaScript. Теперь одна и та же функция действия вызывается при загрузке страницы и при выборе радиокнопки. Я надеюсь, что это помогает.

— 08.09.2018 18:10

05.09.2018 23:26

Please review solution link below. I used javascript to fixed this problem.

I hope this answer will be helpful for you

https://codepen.io/dev_aman/pen/YOxjpR

06.09.2018 00:52

Используя ванильный JavaScript:

function toggleItem ( input )
{
  input.closest( 'li' ).classList.toggle( 'wc-deposits-option-checked' );
}

function toggleOptions ()
{
  let 
    list = document.querySelector( '.wc-deposits-option' ),
    checked = list.querySelector( 'input:checked' );
    
  toggleItem( checked );
  
  list.addEventListener( 'input', () => {
  
    let target = event.target;
    
    toggleItem( target );
    toggleItem( checked );
    
    checked = target;
  
  });
}

toggleOptions();

.wc-deposits-wrapper .wc-deposits-option li {
  padding: .5em 1em;
  border: 1px solid #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  border-radius: 4px;
  box-sizing: border-box;
  width: 49%;
  margin: 0;
  float: left;
}

.wc-deposits-wrapper .wc-deposits-option {
  list-style: none outside;
  margin: 0;
  padding: 0 0 2px;
  overflow: hidden;
  font-size: 1em;
  line-height: 2em;
}

.wc-deposits-option-checked
{
  background-color: #00F;
}

<div class = "wc-deposits-wrapper wc-deposits-optional">
  <ul class = "wc-deposits-option">
    <li>
      <input type = "radio" name = "wc_deposit_option" value = "yes" id = "wc- 
    option-pay-deposit">
      <label for = "wc-option-pay-deposit">
    Option 1    </label>
    </li>
    <li>
      <input type = "radio" name = "wc_deposit_option" value = "no" id = "wc-option- 
    pay-full" checked = "checked">
      <label for = "wc-option-pay-full">
    Option 2    </label>
    </li>
  </ul>
</div>

Спасибо ! Замечательно.

— 08.09.2018 16:22

06.09.2018 01:26