检查无线电时检查文本颜色

Question

我试图在选中单选按钮时更改 p1 的文本颜色。如果选择向上，则为绿色，或向下，为红色。我可以使用 css 更改单选框的颜色，没有任何问题，但我无法更改文本。

<form>
  <p1>Test1: </p1>
  <input type="radio" id="up" style="vertical-align: middle" name="test1" value="Up" checked> Up
  <input type="radio" id="down" style="vertical-align: middle" name="test1" value="Down"> Down
  <input type="radio" id="route" style="vertical-align: middle" name="test1" value="en route"> En route  
  <input type="radio" id="house" style="vertical-align: middle" name="test1" value="In-House"> In-House  
  <b>  Notes: </b><br>
 </form>

Answer 1

欢迎来到 Stack Overflow！

要在JavaScript中设置一个元素的颜色，你只需要访问该元素，然后访问样式对象，然后设置颜色值。比如这个

<p id="changeMe">Text will change to green :)</p>
    <script>
    // Using ES5 (Ecma-Script 2015) for compatibility sake
    var elementToChange = document.querySelector("#changeMe")
    elementToChange.style.color = "green"
    </script>

您可以像这样检测 JavaScript 中的复选框是否被选中，

<input type="checkbox" id="check">
<h1 style="color: red;" id="res">Checked?</h1>
<button onclick="isChecked()">Check If Checked</button>
<script>
  function isChecked() {
  var element = document.querySelector("#check")
  var res = document.querySelector("#res")
  if(element.checked) {
    res.style.color = "green"
  }
  else {
    res.style.color = "red"
  }
  }

</script>

由于我们不喜欢在 Stack Overflow 上用勺子喂食，所以我会让您将 2 和 2 放在一起。祝你有美好的一天！

Answer 2

如果您正在寻找一个纯粹的 CSS 解决方案，因为您没有将其标记为 js 问题，您也可以这样做，但您必须稍微调整一下 HTML .您可以添加任意数量的无线电输入，只要 p 元素在它们之后，这仍然有效。

<form>
  <input type="radio" id="up" style="vertical-align: middle" name="test1" value="Up" checked><label for="up"> Up</label>  
  <input type="radio" id="down" style="vertical-align: middle" name="test1" value="Down"><label for="down"> Down</label>
  <p class="color-me">Test1: </p>
 </form>

form {
  display: flex;
  flex-direction: row;
} 

.color-me {
  order: 1;
}

#up, #up ~ label, #down, #down ~ label {
  order: 2;
}


#up:checked ~ .color-me{
  background-color: tomato;
}

 #down:checked ~ .color-me{
   background-color: steelblue;
}

检查无线电时检查文本颜色

Check text color when radio is checked

html

css

radio