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

  }

}());

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，則用感興趣的顏色標記每個身體。