javascript - JavaScript 中的复选框

Question

我有一个问题。我必须创建一个包含五个复选框的表单。

1. 用户必须恰好选中五个复选框中的三个。
2. 在更改复选框时更新复选框处的标记
3. 当用户按下第四个元素时，应该以红灯亮起。

<强>3。当您取消选择任何项目标记时，它会消失(白色)并且其余部分为绿色。

这是我完成的:http://jsfiddle.net/epredator/98TfU/

和我的一些代码，因为我不能在文本中没有一些代码的情况下发布 JSfiddle 链接 ;):

 function checkGreen() {
        if (this.checked && counter >= 3) {
            console.log("if test in checkGreen()");
        }
    }

我对第 3 点有疑问，因为在取消选中一个带有绿灯的复选框后，我不知道如何将红灯变为绿灯。我花了很多时间在上面。如您所见，我不是 Javascript 的大师，并向您寻求帮助，请帮助我 :) ... 最后我必须使用纯 JavaScript(没有 jQuery)。非常感谢您的帮助...

Answer 1

下面是我的做法。它比你以前的做法更干净。 FIDDLE .保留一组选中的框，并使用它来确定哪些应该是什么颜色。

(function() {
  var checked = [];

  document.getElementById("Checkbox1").addEventListener("click",toggle);
  document.getElementById("Checkbox2").addEventListener("click",toggle);
  document.getElementById("Checkbox3").addEventListener("click",toggle);
  document.getElementById("Checkbox4").addEventListener("click",toggle);
  document.getElementById("Checkbox5").addEventListener("click",toggle);

  function toggle() {
    if (this.checked) {
        checked.push(this);
    } else {
        var index = checked.indexOf(this);
        var box = checked.splice(index,1)[0];
        box.nextElementSibling.className = "white";
    }
    refresh();
  }

  function refresh() {
    for (var i = 0; i < checked.length; i++) {
        if (i < 3) {
            checked[i].nextElementSibling.className = "green";
        } else {
            checked[i].nextElementSibling.className = "red";
        }
    }

  }

}());