display hidden div when unchecking checkbox

[surboomer]

hi all

i have this script but it does not display the div id when unchecking the yep check box, why?

<td>
<div id="radiobuttons" style="display:;">
<input type='radio' name='zoekterm' value='100'>100-nummers<br>
<input type='radio' name='zoekterm' value='500'>500-nummers<br>
<input type='radio' name='zoekterm' value='beide' checked>Alle
</div><br>
</td>
<td>
<input type="checkbox" name="nope" onclick="toggleonRadios()" checked>check<br>
<input type="checkbox" name="yep" onclick="toggleRadios()">check<br>
<input type="checkbox" name="yep" onclick="toggleRadios()">check<br>

<input type="checkbox" name="yep" onclick="toggleRadios()">check<br>
</td>
<script type="text/javascript">
var radioDiv = document.getElementById("radiobuttons");
function toggleonRadios(){
if(radioDiv.style.display = "none"){
radioDiv.style.display == "";
}
}
function toggleRadios(){
if(radioDiv.style.display == ""){
radioDiv.style.display = "none";
}
}

</script>

[jscheuer1]

Your three checkboxes named 'yep' all have onclick="toggleRadios()". If you look in that function, it only says to set the display property of the div with the id of radiobuttons to a value of 'none' and only if it is already set to nothing. If you want the function to actually toggle, it needs to say:

function toggleRadios(){
if(radioDiv.style.display == "")
radioDiv.style.display = "none";
else
radioDiv.style.display = "";
}

That still will not guarentee that the checked state of the checkbox wil have anything to do with it.

I'd leave the function the way it is, use only one yep checkbox and do something like this:

<input type="checkbox" name="yep" onclick="if (this.checked){toggleonRadios()}else{toggleRadios()}">check

But, for that to work, fix the toggleonRadios function:

function toggleonRadios(){
if(radioDiv.style.display = "none"){
radioDiv.style.display = "";
}
}

[surboomer]

Hi John

Thanks for your help, I appreciate it...I don't think I was clear enough as it still does not work the way I want.

The nope box should not do anything to div id but as soon as one at leat of the 3 yep boxes is checked then the div id gets hidden. On the other hand, if the none of the yep is checked then I want to show div id again.

Cheers
Jack

[jscheuer1]

Well, I did answer your question though, do you think you can take it from here? One other thing I missed though is that after I partly fixed toggleonRadios() to:

function toggleonRadios(){
if(radioDiv.style.display = "none"){
radioDiv.style.display = "";
}

I realize that the conditional needs two equal signs, it should be:

function toggleonRadios(){
if(radioDiv.style.display == "none"){
radioDiv.style.display = "";
}

[jscheuer1]

I played around a bit more and this does what you say:

The nope box should not do anything to div id but as soon as one at leat of the 3 yep boxes is checked then the div id gets hidden. On the other hand, if the none of the yep is checked then I want to show div id again.

<td>
<div id="radiobuttons" style="display:;">
<input type='radio' name='zoekterm' value='100'>100-nummers<br>
<input type='radio' name='zoekterm' value='500'>500-nummers<br>
<input type='radio' name='zoekterm' value='beide' checked>Alle
</div><br> 
</td>
<td>
<!--"The nope box should not do anything to div id"-->
<input type="checkbox" name="nope" checked>check<br>
<input type="checkbox" name="yep" onclick="if (this.checked){toggleRadios()}else{toggleonRadios()}">check<br>
<input type="checkbox" name="yep" onclick="if (this.checked){toggleRadios()}else{toggleonRadios()}">check<br>
<input type="checkbox" name="yep" onclick="if (this.checked){toggleRadios()}else{toggleonRadios()}">check<br>
</td>
<script type="text/javascript">
var radioDiv = document.getElementById("radiobuttons");
function toggleonRadios(){
var yeps=document.getElementsByTagName('input')
for (var i_tem = 0; i_tem < yeps.length; i_tem++)
if (yeps[i_tem].name=='yep'&&yeps[i_tem].checked)
return;  // exits here before restoring the div unless all yeps are unchecked
if(radioDiv.style.display = "none"){
radioDiv.style.display = "";
}
}
function toggleRadios(){
if(radioDiv.style.display == ""){
radioDiv.style.display = "none";
}
}

</script>