Showing hidden div if checkbox is checked

Question

I have two checkboxes. The checkBoxValidate function triggered by "onclick" assures that the two checkboxes cannot be both selected at the same time. The showMe function, also triggered by "onclick", displays a hidden div when check box is clicked. Everything just fine.

The problem:

When clicking on checkbox1 and then on checkbox2, the div triggered by checkbox1 is not automatically hidden. The idea is than when a checkbox is not selected the div triggered by it should not be visible... Please look at the demo.

Thank you!

DEMO:

http://jsbin.com/iNuPAREq/1/edit?html,js,output

HTML:

<form action="whatever" name="comanda11" method="post" onsubmit="return validate(this)">

<input type="checkbox" name="c1" onclick="showMe('content1'); checkBoxValidate(0);">

<input type="checkbox" name="c1" onclick=" showMe('content2'); checkBoxValidate(1);">

<div id="content1" style="display:none">
Content 1
</div>

<div id="content2" style="display:none">
Content 2
</div>

</form>

JS:

    function showMe(box) {
        var chboxs = document.getElementsByName("c1");
        var vis = "none";
        for (var i = 0; i < chboxs.length; i++) {
            if (chboxs[i].checked) {
                vis = "block";
                break;
            }
        }
        document.getElementById(box).style.display = vis;
    }

    function checkBoxValidate(cb) {
        for (j = 0; j < 8; j++) {
            if (eval("document.comanda11.c1[" + j + "].checked") == true) {
                document.comanda11.c1[j].checked = false;
                if (j == cb) {
                    document.comanda11.c1[j].checked = true;
                }
            }
        }
    }

Answer 1

change the markup to use radio buttons, and remove the inline javascript:

<form action="whatever" name="comanda11" method="post">
    <input type="radio" name="c1" data-rel="content1" />
    <input type="radio" name="c1" data-rel="content2" />
    <div id="content1" style="display:none">Content 1</div>
    <div id="content2" style="display:none">Content 2</div>
</form>

then do

var elems = document.getElementsByName('c1');

for (var i=elems.length; i--;) {
    if (elems[i].addEventListener) {
        elems[i].addEventListener ('change',fn,false);
    }else if (elems[i].attachEvent) {
        elems[i].attachEvent ('onchange',fn); 
    }
}

function fn() {
    var rel = this.getAttribute('data-rel');
    document.getElementById(rel=='content1'?'content2':'content1').style.display = 'none';
    document.getElementById(rel).style.display = 'block';
}

FIDDLE

If you just have to use checkboxes, here's a working solution:

var elems = document.getElementsByName('c1');

for (var i=elems.length; i--;) {
    if (elems[i].addEventListener) {
        elems[i].addEventListener ('change',fn,false);
    }else if (elems[i].attachEvent) {
        elems[i].attachEvent ('onchange',fn); 
    }
}

function fn() {
    var rel   = this.getAttribute('data-rel');

    for (var i=elems.length; i--;) {
        if (elems[i] != this) elems[i].checked = false;
        var id = elems[i].getAttribute('data-rel');
        document.getElementById(id).style.display = elems[i].checked ? 'block' : 'none';
    }
}

FIDDLE

Answer 2

The simplest way to get this to behave correctly is to set all divs to hidden before setting the div selected to block .

var divs = [document.getElementsByName("content1"),document.getElementsByName("content2")];
for(var i=0; i < divs.length; i++_ {
    divs[i].style.display = 'none'
}

The above code should go above document.getElementById(box).style.display = vis;

Note that There are much better ways to work with DOM elements. I would recommend looking into jQuery as a much simpler way of doing this. Also, manually building an array of two div elements is not the best way to do this, but I don't want to risk grabbing other divs that might be in your document.

Answer 3

Not an elegant solution but it works for your situation

function showMe (box) {
        var chboxs = document.getElementsByName("c1");
        var vis = "none";
        document.getElementById("content1").style.display = "none";
        document.getElementById("content2").style.display = "none"; 
        for(var i=0;i<chboxs.length;i++) 
        { 
          if(chboxs[i].checked)
          {
             vis = "block";
                break;
           }
        }
        document.getElementById(box).style.display = vis;  

}

Answer 4

In this situation, I set a global variable to the div being displayed at the time it is "unhidden". lets call it "lastdiv" as an example.

var lastdiv=false;
function showme(){
 if(lastdiv){lastdiv.style.display='none';}
 lastdiv=?????? // your code to find the div to unhide
 lastdiv.style.display='block';
}

You have lots of other issues in your code to work out including the use of eval in a situation where it is clearly not warranted. There are better ways to do it without using eval.