检查其中输入时的样式标签

Question

我不知道如何使这项工作。我在下面有 HTML 代码。我想在标签上应用样式，当检查输入时，我想设置标签背景的样式。有什么解决方案吗，因为我无法使用 input:checked+label, label+input:checked.... 没有任何效果。

<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>

提前致谢

Answer 1

更新：

我使用 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 选择器中使用波浪符“~”，如下所示，这被称为“后续兄弟组合器”，因为您的 input 元素和您的 span 元素共享同一个父元素。

引用自：https://www.geeksforgeeks.org/what-does-symbol-tilde-denotes-in-css/

您使用“+”这一事实不起作用，因为它用于选择下一个直接同级元素。

您可以查看 CSS Combinators 以了解更多详细信息： https://www.w3schools.com/css/css_combinators.asp

在代码中，我只更改了价格范围标签的背景颜色。您可以根据需要修改代码。

#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>

Answer 2

您不能根据孩子的状态设置样式。使用您正在使用的选择器（兄弟选择器），您似乎希望标签成为单选按钮的兄弟。

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

那你就可以:checked + label { background-color: red }了。

在 cmets 中，您询问了如何保留标记并使用 jQuery 执行此操作。您可以执行以下操作：

$('input[type="radio"]').on('change', function(event) {
  const $input = $(this)
  $input.closest('label').toggleClass('checked', $input.checked)
})