Question

我想更改标签类'label-status'的背景颜色，具体取决于单选按钮是否设置为同意或不同意。

<div class="testclass">
    <label class="label-status">Status</label>
    <label class="radio-inline" style="display:inline-block;"><input type="radio" name="status" disabled="">Agree</label>
    <label class="radio-inline" style="display:inline-block;"><input type="radio" name="status" checked="" disabled="">Disagree</label>
</div>

由于它不是我的网站，但我想注入一些自定义用户CSS以使其更有用，我无法对实际的html进行任何更改。

提前感谢您的回答。

Answer 1

您可以利用var global = global || window; function doSomething(type) { global[type].someMethod(); } var myObject = { someMethod : function () { console.log("calling someMethod") }, }; doSomething("myObject"); 属性（ Flexbox 或 Grid ）和order < em> attribute 将for与相关的label元素相关联：

input

.testclass {display: flex} /* displays flex-items (children) inline; can also use the "inline-flex" which only takes the content's width */

.label-status {order: -1} /* puts it back to the desired place (above other siblings); the initial value is set to 0 */

.testclass > input:first-of-type:checked ~ .label-status {background: green}
.testclass > input:last-of-type:checked ~ .label-status {background: red}

然后您可以使用 general sibling combinator <div class="testclass"> <input type="radio" name="status" id="agree"> <label for="agree">Agree</label> <input type="radio" name="status" id="disagree" checked> <label for="disagree">Disagree</label> <label class="label-status">Status</label>  </div> 定位 ~，例如.label-status＆amp;在:first-of-type 元素上设置:last-of-type 选择器，当然还与input 伪类选择器一起设置

Answer 2

您可以使用JS，如下所示：

$(document).ready(function() {
   $(".label-status").on("click",function() {
            if($(this).find('input[type="radio"]').is(':checked')) { 
          $('.radio-inline').removeClass('sel_bk_color');
          $(this).addClass('sel_bk_color');
        }
    });
});

以下是此类操作的示例：https://jsfiddle.net/tr9Lyxz3/1/

Answer 3

默认情况下，您的输入被禁用。您必须首先删除禁用属性，然后添加onclick属性以运行将更改背景颜色的函数。

 document.getElementsByName('status')[0].removeAttribute("disabled")
 document.getElementsByName('status')[1].removeAttribute("disabled")
 document.getElementsByClassName('radio-inline')[0].setAttribute("onclick","myFunction()")
 document.getElementsByClassName('radio-inline')[1].setAttribute("onclick","myFunction()")
 function myFunction(){
    if (document.getElementsByName('status')[1].checked) {
        document.getElementsByClassName("label-status")[0].classList.remove("myclass2")
        document.getElementsByClassName("label-status")[0].classList.add("myclass1");
    }
    else if (document.getElementsByName('status')[0].checked) {
        document.getElementsByClassName("label-status")[0].classList.remove("myclass1")
        document.getElementsByClassName("label-status")[0].classList.add("myclass2");
    }
 }

你必须根据你的背景颜色要求为myclass1和myclass2定义你的css。

使用纯css是不可能的，因为你无法使用css动态读取值。因此，如果您可以使用js，那么这将解决您的问题，而无需编辑html。

Answer 4

一些纯CSS解决方案似乎错过了您不允许更改HTML。

您是否可以使用javascript？

以下是一些没有JQuery的javascript：

    var updateLabel = function(e) {
          var label = document.getElementsByClassName("label-status")[0];
          if (e.target !== e.currentTarget && event.target.type === "radio") {
            if(e.target.labels[0].innerText === "Agree") {
              label.style.background = "green"
            } else {
              label.style.background = "red";
            }
          }
          e.stopPropagation();
        }

    var wrapperElement = document.getElementsByClassName("testclass")[0];
    wrapperElement.addEventListener("click", updateLabel, false);

https://codepen.io/anon/pen/MXWJXK

您必须从单选按钮中删除已禁用的属性。使用javascript，您可以使用element.removeAttribute（＆＃34;禁用＆＃34;）。

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

Answer 5

＆＃13;

.buttons {
    display: flex
    align-item: center;
}

.condition {
    padding-right: 50px;
}

.status {
    order: -1;
    padding: 5px;
    border: 2px solid #000;
    color: #fff;
}

.buttons > input:first-of-type:checked ~ .status {
    background: green;
}
.buttons > input:last-of-type:checked ~ .status {
    background: red;
}

＆＃13;

<div class="buttons">
    <input type="radio" name="status" id="agree">
    <label for="agree" class="condition">Agree</label>
    <input type="radio" name="status" id="disagree" checked>
    <label for="disagree" class="condition">Disagree</label>
    <label class="status">Status</label>
</div>

＆＃13;

当选中单选按钮时，CSS更改另一个元素的标签背景

5 个答案: