Dynamically Show/Hide Radio buttons of a Radio button group using JavaScript

Question

Hi,

I am looking for a way to Show/ Hide some of the Radio buttons of a Radio button group using JavaScript.

How can this be achieved?

Thanks

Answer 1

That's a very generic question, so I can only offer a very generic answer. Using jQuery, for example:

$("#some-selector .of-some-kind .for-the-things-you-wish-to-hide").hide();

Of course, what you're selecting, and under what circumstances you want to hide it can dramatically impact the best way to go about the problem.

Answer 2

The id attribute identifies the individual radio buttons. All of them will be related to the group by the name attribute

You can get the individual radio buttons using something like

var rbtn = document.getElementById('radioButton1');

Then set the display or visibility style to hide or show.

rbtn.style.display = 'none'; // 'block' or 'inline' if you want to show.

Answer 3

document.getElementById('myRadioButtonId').style.display = 'none'; //hide it

document.getElementById('myRadioButtonId').style.display = 'block'; //show it

Answer 4

Apply a CSS class to the radiobuttons then use a loop to set the display = 'none' for each radiobutton.

Firstly, we need a cross-browser getElementsByClassName function

/*
    Developed by Robert Nyman, http://www.robertnyman.com
    Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag, elm){
    if (document.getElementsByClassName) {
     getElementsByClassName = function (className, tag, elm) {
      elm = elm || document;
      var elements = elm.getElementsByClassName(className),
       nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
       returnElements = [],
       current;
      for(var i=0, il=elements.length; i<il; i+=1){
       current = elements[i];
       if(!nodeName || nodeName.test(current.nodeName)) {
        returnElements.push(current);
       }
      }
      return returnElements;
     };
    }
    else if (document.evaluate) {
     getElementsByClassName = function (className, tag, elm) {
      tag = tag || "*";
      elm = elm || document;
      var classes = className.split(" "),
       classesToCheck = "",
       xhtmlNamespace = "http://www.w3.org/1999/xhtml",
       namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
       returnElements = [],
       elements,
       node;
      for(var j=0, jl=classes.length; j<jl; j+=1){
       classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
      }
      try {
       elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
      }
      catch (e) {
       elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
      }
      while ((node = elements.iterateNext())) {
       returnElements.push(node);
      }
      return returnElements;
     };
    }
    else {
     getElementsByClassName = function (className, tag, elm) {
      tag = tag || "*";
      elm = elm || document;
      var classes = className.split(" "),
       classesToCheck = [],
       elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
       current,
       returnElements = [],
       match;
      for(var k=0, kl=classes.length; k<kl; k+=1){
       classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
      }
      for(var l=0, ll=elements.length; l<ll; l+=1){
       current = elements[l];
       match = false;
       for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
        match = classesToCheck[m].test(current.className);
        if (!match) {
         break;
        }
       }
       if (match) {
        returnElements.push(current);
       }
      }
      return returnElements;
     };
    }
    return getElementsByClassName(className, tag, elm);
};

then use like so

var radioButtons = getElementsByClassName('myClassName', 'input');
var len = radioButtons.length;

for (var i = 0; i < len; i++)
    radioButtons[i].style.display = 'none';

Answer 5

Everybody else has nailed it, so I'll put in a plug for the frameworks.

Using jquery or mootools or another framework makes this super easy:

MooTools:

$$('input[name=myRadioName]).setStyle('display','none');

or

$$('input[name=myRadioName]).fade('out');

Answer 6

You can try something like

<span id="myspan"><input id="radioButton1" type="radio" />Some label goes here</span>

Then

document.getElementById('myspan').style.display="none"; //inline or block to display again

If you are using JQuery then

$('myspan').hide(); // show() to display again

Answer 7

Thanks for all the answers!