[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1093
  • Last Modified:

uncheck radio button, close div...

Hi everyone...

I'm currently using this script to display some divs:

var dArray=new Array("div1","div2","div3");
function showThis(nme) {
   for (var i=0;i<dArray.length;i++) {
      document.getElementById(dArray[i]).style.display='none';
   }
   document.getElementById(nme).style.display='';
}

<input type="radio" value="div1" onclick="showThis(this.value);" onmouseover="this.style.cursor='hand'"  name="forms">
<DIV ID="div1" STYLE="display:none">
blah
</DIV>
<input type="radio" value="div2" onclick="showThis(this.value);" onmouseover="this.style.cursor='hand'"  name="forms">
<DIV ID="div2" STYLE="display:none">
blah
</DIV>
<input type="radio" value="div3" onclick="showThis(this.value);" onmouseover="this.style.cursor='hand'"  name="forms">
<DIV ID="div3" STYLE="display:none">
blah
</DIV>

Can it be modified so that user can "turn off" the radio button, therefore hiding the div?

Thanks as always  :-)
0
whaleyk
Asked:
whaleyk
1 Solution
 
mosphatCommented:
How about this?

<script>
var dArray=new Array("div1","div2","div3");
var activeElement = null;
function showThis(nme) {
   for (var i=0;i<dArray.length;i++) {
      document.getElementById(dArray[i]).style.display='none';
   }
     if (activeElement == nme) {
        activeElement = null;
        nme.checked = false;
    } else {
        activeElement = nme;
        document.getElementById(nme.value).style.display='';
    }
}
</script>
<input type="radio" value="div1" onclick="showThis(this);" onmouseover="this.style.cursor='hand'"  name="forms">
<DIV ID="div1" STYLE="display:none">
blah
</DIV>
<input type="radio" value="div2" onclick="showThis(this);" onmouseover="this.style.cursor='hand'"  name="forms">
<DIV ID="div2" STYLE="display:none">
blah
</DIV>
<input type="radio" value="div3" onclick="showThis(this);" onmouseover="this.style.cursor='hand'"  name="forms">
<DIV ID="div3" STYLE="display:none">
blah
</DIV>
0
 
devicCommented:
hi whaleyk, check this:
==================
<script>

var dArray=new Array("div1","div2","div3","off");
function showThis(obj)
{
      for(var i=0;i<dArray.length;i++)
      document.getElementById(dArray[i]).style.display='none';
      if(obj.value=="none")return;
      document.getElementById(obj.value).style.display='';
      document.getElementById("off").style.display='';
}
</script>

<input type="radio" value="div1" onclick="showThis(this);" onmouseover="this.style.cursor='hand'"  name="forms">
<DIV ID="div1" STYLE="display:none">
blah1
</DIV><br>
<input type="radio" value="div2" onclick="showThis(this);" onmouseover="this.style.cursor='hand'"  name="forms">
<DIV ID="div2" STYLE="display:none">
blah2
</DIV><br>
<input type="radio" value="div3" onclick="showThis(this);" onmouseover="this.style.cursor='hand'"  name="forms">
<DIV ID="div3" STYLE="display:none">
blah3
</DIV><br>
<DIV ID="off" STYLE="display:none">
"turn off"
<input type="radio" value="none" onclick="showThis(this);" onmouseover="this.style.cursor='hand'"  name="forms">
</DIV>
0
 
ZvonkoSystems architectCommented:
Like this:

<script>

var dArray=new Array("div1","div2","div3");
function showThis(theRadio) {
   hideAll();
   document.getElementById(theRadio.value).style.display='';
}

function hideAll(){
   for (var i=0;i<dArray.length;i++) {
      document.getElementById(dArray[i]).style.display='none';
   }
}
</script>
<form>
<input type="radio" value="div1" onclick="showThis(this);" onDblClick="this.checked=false;hideAll()" style="cursor:hand;"  

name="forms">
<DIV ID="div1" STYLE="display:none">
blah
</DIV>
<input type="radio" value="div2" onclick="showThis(this);" onDblClick="this.checked=false;hideAll()" style="cursor:hand;"  

name="forms">
<DIV ID="div2" STYLE="display:none">
blah
</DIV>
<input type="radio" value="div3" onclick="showThis(this);" onDblClick="this.checked=false;hideAll()" style="cursor:hand;"  

name="forms">
<DIV ID="div3" STYLE="display:none">
blah
</DIV>
</form>

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
ZvonkoSystems architectCommented:
Here a simplified version:

<script>
var lastTurn;
var dArray=new Array("div1","div2","div3");
function showThis(theRadio) {
   for (var i=0;i<dArray.length;i++) {
      document.getElementById(dArray[i]).style.display='none';
   }
   if(lastTurn!=theRadio){
     document.getElementById(theRadio.value).style.display='';
   } else {
     theRadio.checked = false;
   }
   lastTurn = theRadio;
}

</script>
<form>
<input type="radio" value="div1" onclick="showThis(this);" style="cursor:hand;" name="forms">
<DIV ID="div1" STYLE="display:none">
blah
</DIV>
<input type="radio" value="div2" onclick="showThis(this);" style="cursor:hand;" name="forms">
<DIV ID="div2" STYLE="display:none">
blah
</DIV>
<input type="radio" value="div3" onclick="showThis(this);" style="cursor:hand;" name="forms">
<DIV ID="div3" STYLE="display:none">
blah
</DIV>
</form>

0
 
ZvonkoSystems architectCommented:
Sorry, now I see my last proposal is simmelar to mosphat first proposal.
0
 
mosphatCommented:
With the difference that once you turn off a selection, your code doesn't allow a re-selection. Mine does ;)
0
 
ZvonkoSystems architectCommented:
Uhps, that too :(
0
 
whaleykAuthor Commented:
Thanks all so much (mosphat  you were first and your code does exactly what I need) :-)

THANK YOU THANK YOU THANK YOU
0
 
ZvonkoSystems architectCommented:
Only for philosofical discussions: document.activeElement is a default attribute.
So perhaps changing that var name would avoid confusion.

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now