Checkboxes in JavaScript

Question

I've got a problem. I must create a form with five check-boxes.

1. The user must select exactly three of the five check-boxes.
2. At the time of change check-box updates the marker at check-box
3. When the user presses a fourth element should light up at the red light.

3. When you deselect any item marker when it disappears (is white) and the rest are green.

Here is what I'm done: http://jsfiddle.net/epredator/98TfU/

and some of my code, because I can't post a JSfiddle link without some code in text ;):

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

I've got a problem with point 3, because i don't know how to change red light to green after uncheck one of check-boxes with green light. I spend a lot of time on it. As you can see I am not the master of Javascript and ask you for help, pleas help me :) ... and for the end i must use pure JavaScript (no jQuery). Thanks a lot for help ...

Answer 1

Here is how I would do it. It is cleaner than how you were doing it before. FIDDLE. Keep an array of the checked boxes, and use it to determine which ones should be what color.

(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

For Javascript, you can use below code

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

and HTML used as: (note only 'name' property from input element)

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

You can get all the checked elements and if the count is 3, mark every body with interested color.