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

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

您不能根据 child 的状态设置样式。对于您正在使用的选择器（同级选择器），您似乎希望标签成为单选按钮的同级。

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

那么你可以:checked + label { background-color: red }.

在您询问如何保留标记并使用 jQuery 执行此操作的评论中。你可以这样做：

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

Answer 2

更新：

我使用 JQuery 添加了这个替代解决方案，因为您的标签是输入的 parent，目前无法 selecting 一个 child parent 使用 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>

原Post:

不应使用“+”，而应使用“~”组合符。

使用 "for" 属性（在 label 元素中）和 "id" 属性（在 input 元素中）将标签连接到输入。

然后，在您的 CSS select 中使用波浪号“~”或如下所示，这被称为 "Subsequent-sibling combinator" 因为您的输入元素和您的跨度元素共享相同的parent。

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

您使用“+”这一事实是行不通的，因为它用于 select 下一个直接同级元素。

您可以查看 CSS 组合器以获取更多详细信息： 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>

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

Style label when input inside of it is checked

html

css

input

label

checked