CSS检查是否检查输入并链接元素答案

【问题标题】：CSS checking if input is checked and chaining elementsCSS检查是否检查输入并链接元素
【发布时间】：2022-02-11 21:44:04
【问题描述】：

伙计们，我无法完成这项工作。问题是我不再知道如何（尝试）让它发挥作用。

#5starcheckbox:checked+label[for="5starcheckbox"]>.col-lg-10>.progress>.progress-bar {
  opacity: 1 !important;
}

input#5starcheckbox:checked+span#5starpercentage {
  color: #0060df !important;
}

<label for="5starcheckbox" class="row filterlabel">
    <div class="col-lg-1 col-1">
        <div class="checkboxes text-end">

                <input type="checkbox" id="5starcheckbox" name="stars[]" value="5">
                <span class="checkmark"></span>

        </div>
    </div>
    <div class="col-lg-10 col-9 pt-1">
        <div class="progress">
            <div class="progress-bar progress5" role="progressbar" style="width: {{ $scoreInfo['percent_5_star'] }}%;opacity:0.6;" aria-valuenow="{{ $scoreInfo['percent_5_star'] }}" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
    <div class="col-lg-1 col-2 text-end text-secondary" id="5starpercentage"><strong>{{ $scoreInfo['percent_5_star'] }}%</strong></div>
</label>

我的代码有问题吗？为什么它不起作用？

【问题讨论】：

标签： html css

【解决方案1】：

问题是，您的标签包含您的输入。如果选择器匹配，CSS 选择器 +（在您的情况下为 #5starcheckbox:checked + label[for="5starcheckbox"]）匹配以下同级。所以，#5starcheckbox:checked + label[for="5starcheckbox"] 只匹配下面代码中的标签：

<input type="checkbox" name="5starcheckbox" id="5starcheckbox">
<label for="5starcheckbox"></label>

CSS 中没有父选择器。

【讨论】：

那么就没有办法实现我想做的吗？
@JohnFurgeson 您需要更改 html 结构或使用 javascript。
可能会求助于 jQuery。谢谢大家！

【解决方案2】：

我求助于 jQuery 来做到这一点。

$("#form").on('change', function() {
    for(i = 1; i <= 5; i++) {
        checkbox = $("#" + i + "starcheckbox");
        checked = checkbox.is(":checked");
        if(checked == true) {
            $("#" + i + "starpercentage").removeClass('text-secondary').addClass('text-primary');
            $(".progress" + i).css('opacity', '1.0');
        } else {
            $("#" + i + "starpercentage").removeClass('text-primary').addClass('text-secondary');
            $(".progress" + i).css('opacity', '0.4');
        }
    }
});

【讨论】：