javascript - 如何在 Javascript 中更改复选框的边框颜色

Question

我正在学习如何对各种类型的元素进行表单验证，并且只想使用 Javascript 来完成。我这里有一些复选框和一个 Javascript 函数，用于检查复选框是否在提交表单时至少选择了一个选项。如果没有选择任何选项，复选框基本上应该显示为红色。但是我得到了错误:

Uncaught TypeError: Cannot set property 'borderColor' of undefined

function validate() {
  var ok = true;
  var yes = document.getElementById("yes").checked
  var no = document.getElementById("no").checked;

  if (!yes && !no) {
    document.getElementsByClassName(".btn-group").style.borderColor = "red";
  }

  return ok;
}

<div data-toggle="buttons" class="btn-group">
  <label class="btn active">
    <input id = "yes" type="checkbox" name="box" value="yes" />
    </i>Yes
  </label>

  <label class="btn active">
    <input id = "no" type="checkbox" name="box" value="no" />No
  </label>
</div>

Answer 1

这里有几个问题:

1. 如果您使用 getElementsByClassName，您应该使用不带点的类名。
2. style 属性用于元素(而 getElementsByClassName 返回元素列表)。
3. 如果您只设置边框的颜色(而不是样式和宽度)，则不会有边框。

这里是更正:

function validate() {
  var ok = true;
  var yes = document.getElementById("yes").checked
  var no = document.getElementById("no").checked;

  if (!yes && !no) {
    ok = false;
    document.getElementsByClassName("btn-group")[0].style.border = '1px solid red';
  } else {
    document.getElementsByClassName("btn-group")[0].style.border = '';
  }
  return ok;
}

<div data-toggle="buttons" class="btn-group">
  <label class="btn active">
    <input id = "yes" type="checkbox" name="box" value="yes" />
    Yes
  </label>

  <label class="btn active">
    <input id = "no" type="checkbox" name="box" value="no" />No
  </label>
</div>

<button onclick="validate()">Validate</button>