Question

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

用户必须选中五个复选框中的三个。
更改时，复选框会在复选框中更新标记
当用户按下第四个元素时，应该点亮红灯。

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

  }

}());

Answer 2

对于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>

和HTML用作:(仅注意输入元素的'name'属性）

<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>

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

JavaScript中的复选框

2 个答案: