Question

我已经使用CSS和Java的一部分构建了HTML模板。我添加了复选框示例quesiton1，您是否无法将其举到手臂上方>是或否，带有2个复选框和/或单选按钮。我希望能够突出显示用户选择的框，我一直在尝试使用此脚本，但是此脚本不起作用。

function checkYellow() {
  var ins = document.getElementsByTagName('input');
  for (var i=0; i<ins.length; i++) {
    if (ins[i].getAttribute('type') == 'checkbox') {
      if ( ins[i].checked == true)
        ins[i].style.backgroundColor="yellow";
      else
        ins[i].style.backgroundColor="white";
    }
  }
}

我仍在学习HTML，CSS和javascript。谢谢你的帮助。我从以前的表单中复制了此文件，并将其插入我的表单中，但是它不起作用。

Answer 1

您可以仅使用CSS来完成此操作-无需编写脚本！

给出类似这样的内容：

<div class="checkbox-holder">
  <input type="checkbox" id="the-box"/></input>
  <label class="checkbox-label" for="the-box">A checkbox!</label>
</div>

您可以使用CSS这样突出显示标签：

.checkbox-label {
  border: 10px;
  background: gray;
}

input[type=checkbox]:checked + .checkbox-label {
  background: yellow;
}

这里的关键部分是我们如何选择将标签变为黄色的方法：

input[type=checkbox]:checked + .checkbox-label

这将选择紧随checkbox-label标记之后，其类型为input且也标记为checkbox的类checked的所有内容。

CSS选择器非常有用。您可以阅读有关它们的更多信息here-Mozilla文档详细介绍了您拥有的所有选项。

我想在用户选择复选框时使其突出显示

1 个答案: