Member Avatar for PeterWaij

I am trying to implement a code to hide and show divs with a radio button. If yes is selected i want to show the divs. If no is selected i want to hide them. It sounds simple enouth but i can't figure this out. Can someone please advise.


Here is my code.

<script language="JavaScript"  type="text/javascript">
<!--
function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
      document.pageLoading.TCallLabel('/','restart_function');
          }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
//-->

</script>
<script type="text/javascript">
	
//***Need the following DIVs hidden until used****
var divs = ["div0", "div1", "div2", "div3", "div4", "div5", "div6"];

function visiblox(arrDiv, hs) {
	var disp = (hs) ? "none" : "block";
	for(var x = 0; x < arrDiv.length; x++) {
		document.getElementById(arrDiv[x]).style.display = disp;
	}
}

function prechk(v){
	v = v.split(',');
	for(var i = 0; i < v.length; ++i){
		chk([divs[v[i]]], true);
	}
}

function chk(what, item) {
	if(item) {
		visiblox(what, false);
	} else {
		visiblox(what, true);
	}
}
</script>
<style type="text/css">
<!--
.show
{
	display: block;
}
.hide
{
	display: none;
}
-->
</style>
</head>
<body>


<div class="rowElem"><label>Vignet:</label> 
			<input type="radio" id="" name="list" option value="1,2,5,6" onchange="chk(divs); prechk(this.value);"><label>Yes</label>
			<input type="radio" id="" name="list" option value="0" onchange="chk(divs); prechk(this.value);" checked><label>No</label></div>	
<div id="div0" class="hide"></div>	


<div id="div1" class="hide"><div id="buttonvignet"></div><input type="submit" value="Vignet!" /></div>
<div id="div5" class="hide"><img src="http://xxxx/xxxx/images/Vignetjes_10/1.png" id="image-to-change"></div>
<div id="div6" class="hide"><div class="rowElem"><label>Vinet Model:</label><input type="text" value="Vinet Model" readonly="readonly" name="vignet"></div></div>
<div id="div2" class="hide"><div class="rowElem"><label>Label:</label> 
			<input type="radio" id="" name="search" value="standard" ><label>Yes</label>
			<input type="radio" id="" name="search" value="advanced" checked><label>No</label></div></div>
</body>
  • 3 Contributors
  • 3 Replies
  • 136 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by PeterWaij
Member Avatar for mahavir123

Use below instead of line 17

var divs = ["div0", "div1", "div2", "div5", "div6"];

You have no div having tag id "div3" and "div4", so javascript is not executing properly.

Edited by mahavir123 because: n/a
Member Avatar for Taywin

Your function 'chk()' takes 2 argument, but when you first call it you passed in only 1 argument -- chk(divs). As a result, the second argument is always null and cause the 'else' statement to be true all the time.

Maybe you can try...

function chk(radioElement) {
  if (radioElement) {
    var vals = radioElement.value.split(",")
    if (radioElement.checked==true) {
      for (var i=0; i<vals.length.i++) {
        visiblox("div"+vals[i], true);
      }
    }
    else {
      for (var i=0; i<vals.length.i++) {
        visiblox("div"+vals[i], false);
      }
    }
  }
}

// and in your HTML for each radio button
<input type="radio" name="list" option value="1,2,5,6" onchange="chk(this)"><label>Yes</label>
<input type="radio" name="list" option value="0" onchange="chk(this)" checked><label>No</label></div>
Member Avatar for PeterWaij

Hey thanks guys,

With your input i was able to solve my problem

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.