Question

我正在寻找一种使用JavaScript显示/隐藏单选按钮组的某些单选按钮的方法。

如何实现这一目标？

由于

Answer 1

id 属性标识各个单选按钮。所有这些都将通过 name 属性

与该组相关联

您可以使用

之类的内容获取各个单选按钮

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

然后将显示或可见性样式设置为隐藏或显示。

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

Answer 2

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

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

Answer 3

这是一个非常通用的问题，所以我只能提供一个非常通用的答案。使用jQuery，例如：

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

当然，您选择的是什么，以及在什么情况下您想隐藏它可能会极大地影响解决问题的最佳方式。

Answer 4

将CSS类应用于radiobuttons，然后使用循环为每个单选按钮设置display = 'none'。

首先，我们需要一个跨浏览器的getElementsByClassName函数

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

然后像这样使用

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

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

Answer 5

其他人都已经钉了它，所以我会为框架添加一个插件。

使用jquery或mootools或其他框架使这非常简单：

MooTools的：

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

或

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

Answer 6

您可以尝试类似

的内容

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

然后

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

如果您正在使用JQuery，那么

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

使用JavaScript动态显示/隐藏单选按钮组的单选按钮

6 个答案: