Метка стиля при проверке ввода внутри него - PullRequest
Новая
       35

Метка стиля при проверке ввода внутри него

1 голос
/ 12 апреля 2020

Я схожу с ума, как заставить эту работу. У меня есть HTML код ниже. Я хочу применить стиль к метке, и когда вход проверен, я хочу стилизовать фон метки Есть ли какое-то решение для этого, потому что я не могу заставить его работать с вводом: проверил + метка, метка + ввод: проверил .... Ничего не работает. 

<ul class="wcsatt-options-prompt-radios">
<li class="wcsatt-options-prompt-radio">
    <label type="radio" class="wcsatt-options-prompt-label wcsatt-options-prompt-label-one-time">
        <input class="wcsatt-options-prompt-action-input" type="radio" name="subscribe-to-action-input" value="no" />
        <span class="wcsatt-options-prompt-action"><?php echo $one_time_cta; ?></span> 
        <span class="subs-box-price">Price</span>
        <div class="sub-sub-text">Save 20$</div>        
    </label>
</li>

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

Ответы [ 2 ]

1 голос
/ 12 апреля 2020

ОБНОВЛЕНО:

Я добавил это альтернативное решение, используя JQuery, так как ваша метка является родительской для ввода, и в настоящее время нет способа выбора родительского элемента ребенка с помощью CSS Combinators : 

$('#radio-label').click(function() {
   if($('#input-radio').is(':checked')) { 
   $('#radio-label').toggleClass('has-background-color'); }
});
.has-background-color {
  background-color: cyan;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<ul class="wcsatt-options-prompt-radios">
<li class="wcsatt-options-prompt-radio">
    <label id="radio-label" type="radio" for="input-radio" class="wcsatt-options-prompt-label wcsatt-options-prompt-label-one-time">
        <input id="input-radio" class="wcsatt-options-prompt-action-input" type="radio" name="subscribe-to-action-input" value="no" />
        <span class="wcsatt-options-prompt-action"><?php echo $one_time_cta; ?></span> 
        <span id="subs-box-price-text" class="subs-box-price">Price</span>
        <div class="sub-sub-text">Save 20$</div>        
    </label>
</li>

Исходное сообщение:

Вместо "+", вы должны использовать "~" комбинатор.

Используйте атрибут «for» (в элементе label) и атрибут «id» (в элементе input) для подключения вашей метки к вашему входу.

Затем используйте тильду "~ "в селекторе CSS, как показано ниже, который называется" комбинатор последующего брата ", поскольку ваш входной элемент и элемент span имеют одного и того же родителя.

Цитируется из: https://www.geeksforgeeks.org/what-does-symbol-tilde-denotes-in-css/

Тот факт, что вы используете "+", не может работать, потому что он используется для выбора следующего непосредственного элемента родного брата.

Вы можете взглянуть на CSS Комбинаторы для более подробной информации: https://www.w3schools.com/css/css_combinators.asp

В коде я только меняю цвет фона тега span для цены , Вы можете изменить код, как вы sh. 

#input-radio:checked~#subs-box-price-text {
  background-color: cyan;
}
<ul class="wcsatt-options-prompt-radios">
<li class="wcsatt-options-prompt-radio">
    <label type="radio" for="input-radio" class="wcsatt-options-prompt-label wcsatt-options-prompt-label-one-time">
        <input id="input-radio" class="wcsatt-options-prompt-action-input" type="radio" name="subscribe-to-action-input" value="no" />
        <span class="wcsatt-options-prompt-action"><?php echo $one_time_cta; ?></span> 
        <span id="subs-box-price-text" class="subs-box-price">Price</span>
        <div class="sub-sub-text">Save 20$</div>        
    </label>
</li>
1 голос
/ 12 апреля 2020

Вы не можете стилизовать в зависимости от состояния ребенка. С помощью селектора, который вы используете (родственный селектор), похоже, что вы хотите, чтобы метка была родным для радиокнопки. 

<input type="radio">
<label>Hi</label>

Тогда вы можете сделать :checked + label { background-color: red }.

* 1006. * В комментариях вы спрашивали о том, как сохранить разметку и сделать это с помощью jQuery. Вы можете сделать что-то вроде: 
$('input[type="radio"]').on('change', function(event) {
  const $input = $(this)
  $input.closest('label').toggleClass('checked', $input.checked)
})
...