JavaScript中的复选框

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

用户必须在五个复选框中选择三个复选框

“更改时”复选框更新“标记处”复选框

当用户按下时，第四个元素应在红灯处亮起 3。当您取消选择任何项目标记时，该标记消失（为白色），其余为绿色。

以下是我所做的：

还有我的一些代码，因为如果没有文本中的代码，我无法发布JSFIDLE链接；）：

---

我对第3点有一个问题，因为我不知道在取消选中其中一个绿灯复选框后如何将红灯变为绿灯。我在这上面花了很多时间。正如你所看到的，我不是Javascript的大师，请你帮助我：）。。。最后，我必须使用纯JavaScript（无jQuery）。非常感谢您的帮助……

对于Javascript，您可以使用以下代码

<script type="text/javascript">

        // method to bind handler
        function bindEvent(element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else {
                element.attachEvent('on' + type, handler);
            }
        }

        // binding click event to all the checkboxes with name 'choice'
        // you can generalize this method
        window.onload = function () {
            var elements = document.getElementsByName('choice');
            if (!elements)
                return;

            for (var i = 0; i < elements.length; i++) {
                var ele = elements[i];
                bindEvent(ele, 'click', function () {
                    changeColor();
                });
            }
        }

        // Pass the checkbox name to the function
        // taken from stack overflow answer 
        //http://stackoverflow.com/questions/8563240/how-to-get-all-checked-checkboxes
        function getCheckedBoxes(chkboxName) {
            var checkboxes = document.getElementsByName(chkboxName);
            var checkboxesChecked = [];
            // loop over them all
            for (var i = 0; i < checkboxes.length; i++) {
                // And stick the checked ones onto an array...
                if (checkboxes[i].checked) {
                    checkboxesChecked.push(checkboxes[i]);
                }
            }
            // Return the array if it is non-empty, or null
            return checkboxesChecked.length > 0 ? checkboxesChecked : null;
        }

        // with your other function, you can call this function or club the functionality
        function changeColor() {
            var elements = document.getElementsByName('choice');

            if (!elements)
                return;

            var selectedCheckBoxes = getCheckedBoxes('choice');
            if (selectedCheckBoxes && selectedCheckBoxes.length == 3) {
                // set color to green 
            }

        }
    </script>

//方法绑定处理程序
函数bindEvent（元素、类型、处理程序）{
if（element.addEventListener）{
元素。addEventListener（类型、处理程序、false）；
}否则{
元素.attachEvent（'on'+类型，处理程序）；
}
}
//将单击事件绑定到名为“choice”的所有复选框
//你可以推广这种方法
window.onload=函数（）{
var elements=document.getElementsByName（'choice'）；
如果（！元素）
返回；
对于（var i=0；i0？checkboxesChecked:null；
}
//使用其他函数，可以调用此函数或俱乐部函数
函数changeColor（）{
var elements=document.getElementsByName（'choice'）；
如果（！元素）
返回；
var selectedCheckBoxes=getCheckedBoxes（'choice'）；
if（selectedCheckBoxes&&selectedCheckBoxes.length==3）{
//将颜色设置为绿色
}
}

和HTML用作：（只注意输入元素的'name'属性）

1.
2.
3.
4.
5.

---

您可以获得所有选中的元素，如果计数为3，则使用感兴趣的颜色标记每个实体。

以下是我将如何做到这一点。这比你以前做的更干净。保留一个复选框数组，并使用它来确定哪些复选框应该是什么颜色

(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";
        }
    }

  }

}());

（函数（）{
检查的var=[]；
document.getElementById（“Checkbox1”）.addEventListener（“单击”，切换）；
document.getElementById（“Checkbox2”）.addEventListener（“单击”，切换）；
document.getElementById（“Checkbox3”）.addEventListener（“单击”，切换）；
document.getElementById（“复选框4”）.addEventListener（“单击”，切换）；
document.getElementById（“Checkbox5”）.addEventListener（“单击”，切换）；
函数切换（）{
如果（选中此项）{
检查。推（这个）；
}否则{
var索引=选中的.indexOf（本）；
变量框=选中。拼接（索引，1）[0]；
box.nextElementSibling.className=“白色”；
}
刷新（）；
}
函数刷新（）{
对于（变量i=0；i

如果用户只能选择三个复选框，为什么允许/能够选中四个或五个复选框？为什么不阻止他们与其中三个以上的人互动呢？当他们选中更多的自由复选框时，指示灯将变为红色。这是那个项目的概念，我不能改变。好吧，那个么这对接下来发生的事情有什么影响呢？带有“红灯”的复选框不会以某种方式提交到数据库？这可能是项目的一个限制，但它似乎是一个糟糕的UI选择。

<span>
        <input type="checkbox" name="choice" id="Checkbox1" />1</span>
    <span>
        <input type="checkbox" name="choice" id="Checkbox2" />2</span>
    <span>
        <input type="checkbox" name="choice" id="Checkbox3" />3</span>
    <span>
        <input type="checkbox" name="choice" id="Checkbox4" />4</span>
    <span>
        <input type="checkbox" name="choice" id="Checkbox5" />5</span>

(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";
        }
    }

  }

}());