Estoy buscando una manera de mostrar / ocultar algunos de los botones de radio de un grupo de botones de radio usando JavaScript.

¿Cómo se puede lograr esto?

Gracias

2
LogInIssue 11 ago. 2009 a las 16:56

6 respuestas

La mejor respuesta

El atributo id identifica los botones de radio individuales. Todos ellos estarán relacionados con el grupo por el atributo nombre

Puede obtener los botones de radio individuales usando algo como

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

Luego configure el estilo de visualización o visibilidad para ocultar o mostrar.

rbtn.style.display = 'none'; // 'block' or 'inline' if you want to show.
5
11 ago. 2009 a las 13:34

Puedes probar algo como

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

Entonces

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

Si está utilizando JQuery, entonces

$('myspan').hide(); // show() to display again
0
Arun P Johny 11 ago. 2009 a las 14:27

Todos los demás lo han clavado, así que pondré un enchufe para los marcos.

El uso de jquery o mootools u otro marco hace que esto sea muy fácil:

MooTools:

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

O

$$('input[name=myRadioName]).fade('out');
0
Ryan Florence 11 ago. 2009 a las 13:18

Aplique una clase CSS a los botones de radio y luego use un bucle para configurar display = 'none' para cada botón de radio.

En primer lugar, necesitamos una función getElementsByClassName entre navegadores

/*
    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);
};

Luego use así

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

for (var i = 0; i < len; i++)
    radioButtons[i].style.display = 'none';
0
Russ Cam 11 ago. 2009 a las 13:16

Esa es una pregunta muy genérica, por lo que solo puedo ofrecer una respuesta muy genérica. Usando jQuery, por ejemplo:

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

Por supuesto, lo que está seleccionando y bajo qué circunstancias desea ocultarlo puede afectar drásticamente la mejor manera de solucionar el problema.

0
VoteyDisciple 11 ago. 2009 a las 13:00
document.getElementById('myRadioButtonId').style.display = 'none'; //hide it

document.getElementById('myRadioButtonId').style.display = 'block'; //show it
2
karim79 11 ago. 2009 a las 13:03