Question

我不打算使用fieldset，而是使用带有单选按钮的span。对html和jquery来说很新。我需要在选中时更改单选按钮的选定颜色。我使用错误的元素来显示单选按钮吗？这是代码：

<div id="sidebar">
  <span style="font-weight: bold;">Filter</span><br>
  <input backgroundColor="red" type="radio" name="filter" value="schedule">Schedule<br>
  <input type="radio" name="filter" value="risk">Risk<br>
  <input type="radio" name="filter" value="opm">OPM<br>
  <input type="radio" name="filter" value="location">Location<br>
  <input background-color="red" type="radio" name="filter" value="all" checked>All<br>
</div>

Answer 1

您需要更新HTML并添加CSS才能实现此目的：

<强> HTML：

<div id="sidebar">
    <span style="font-weight: bold;">Filter</span>
    <br>
    <input type="radio" name="filter" value="schedule"><span>Schedule</span>
    <br>
    <input type="radio" name="filter" value="risk"><span>Risk</span>
    <br>
    <input type="radio" name="filter" value="opm"> <span>OPM</span>
    <br>
    <input type="radio" name="filter" value="location"> <span>Location</span>
    <br>
    <input type="radio" name="filter" value="all" checked><span>All</span>
    <br>
</div>

<强> CSS：

input:checked + span {
    color: red;
}

演示：http://jsfiddle.net/lotusgodkk/GCu2D/1023/

参考：https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

Answer 2

input[type=radio]:checked + span {
  background:gold;
}

所选单选按钮的背景颜色不会更改

2 个答案: