Learn JavaScript : Hide checkbox’s

by

Over the last week you may have noticed that the blog has had an issue with the code statements being all on the same line. This is now fixed, we upgraded the theme used and it had a bug in it that cause this issue but with a hot fix it is now resolved. Anyway back to the article , recently we have been asked about how you could hide a checkbox using JavaScript, this article will show us how it can be done.

First off we need some metadata, and in this case we will just use anything, it does not matter what it is really,

Service1 "Please rate our support service?
(Standard Multi Punch, click Hide it then Show it again)"
    categorical [1..]
    {
        Show "Show it again",
        Ssat "I will vanish when the hide checkbox is selected",
        Hide "Hide it" fix exclusive
    };

As we have seen in the past articles on using JavaScript the key to any interaction is the name of items that we want to play with so do a view source and you will see something like this,


 

 
 
 


 

 
 
 


 

 
 
 

and if you have used the same metadata you will see the names of the items are,

  name="_QService1_CShow" id="_Q0_C0"
  name="_QService1_CSsat" id="_Q0_C1"
  name="_QService1_CHide" id="_Q0_C2"

so next we need to think about the template that we need to use. Like the previous articles we will use the same principles so the body of our template will be


[Text]

[Text]

So what will the code be in this function , well we could do this using the visibility style property of the item,

if(document.mrForm != null)
{
  if(document.mrForm._QService1_CShow != null)
  {
  document.mrForm._QService1_CShow.onclick = function() { 
       document.mrForm._QService1_CSsat.style.visibility = 'visible';}
  document.mrForm._QService1_CHide.onclick = function() { 
       document.mrForm._QService1_CSsat.style.visibility = 'hidden';}
  }
}

but as you will see when you click the check buttons , only the button vanishes not the words, so if you want to do the words as well then we need to re-look at the template and look at the span tags , you will notice that they have IDS also ( Cell.0.1 ) , so code like this is far better.

if(document.mrForm != null)
{
  if(document.mrForm._QService1_CShow != null)
  {
  document.mrForm._QService1_CShow.onclick = function() { 
       document.getElementById("Cell.0.1").style.display = 'block';}
  document.mrForm._QService1_CHide.onclick = function() { 
       document.getElementById("Cell.0.1").style.display = 'none';}
  }
}

The code we have used is slightly different to the first. This time we dont use the visibility property we use the display of the span tag. You will also notice that we use a function called getElementById to find the item that we need in the document. And there you have it some code that you can use in a survey that when your specified check bock is clicked it will hide another one. I hope this helps , but if it does not answer your requirements exactly then let us know and I will try to help.

Leave a Comment