Checkboxes in JavaScript

Question

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

The user must select exactly three of the five check-boxes.
At the time of change check-box updates the marker at check-box
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 ...

If the user can select only three checkboxes, why are they allowed/able to check four, or five? Why not prevent their interacting with more than three of them? — David Thomas, May 05 '14 at 21:29
when they check more then free check-boxes then light will be red. This is concept of that project and i can't change this. — Epredator, May 05 '14 at 21:33
Okay, so how does that affect whatever happens next? Checkboxes with a 'red light' aren't submitted to the database somehow? It may be a restriction of the project, but it seems a poor UI choice. — David Thomas, May 05 '14 at 21:35

Zack Argyle · Accepted Answer · 2014-05-05T22:33:44.007

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

  }

}());

score 1 · Answer 2 · answered May 05 '14 at 21:28

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.

Checkboxes in JavaScript

2 Answers2