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

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

如何做到这一点

---

谢谢

这是一个非常笼统的问题，所以我只能给出一个非常笼统的答案。使用jQuery，例如：

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

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

id属性标识各个单选按钮。它们都将通过name属性与组相关

您可以使用以下方式获取单个单选按钮

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

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

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

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

---

将CSS类应用于radiobuttons，然后使用循环为每个radiobuttons设置

显示='none'

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

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

/*
由Robert Nyman开发，http://www.robertnyman.com
代码/许可证：http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName=函数（类名、标记、elm）{
if（document.getElementsByClassName）{
getElementsByCassName=函数（类名、标记、elm）{
elm=elm | |文件；
var elements=elm.getElementsByClassName（className），
nodeName=（标记）？新的RegExp（“\\b”+tag+”\\b，“i”）：null，
returnElements=[]，
现在的
对于（var i=0，il=elements.length；i其他所有人都已经解决了这个问题，所以我将为框架插入一个插件

使用jquery或mootools或其他框架可以使这一过程变得非常简单：

MooTools：

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

或

你可以试试类似的东西

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

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

如果您使用的是JQuery，那么

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

设置display属性更好，因为可见性隐藏仍然占用空间。我尝试了此操作。它只隐藏控件，而不隐藏单选按钮后面的文本。我应该如何隐藏该文本？@Loginissue：您可以用相同的方式隐藏文本，方法是将其包装在or中并给包装器元素一个id。不是每个文本条目都绑定到控件吗？a实际上没有。我会创建单选按钮，如-ChoiceText…因此，文本是分开的。正如weenaak所说，将它们放在span或div中，并隐藏/显示它们…ChoiceThis似乎隐藏控件，但不隐藏控件后面的文本。我如何隐藏文本呢？对此执行完全相同的操作，例如document.getElementById（'myTextElementId'））.style.display='none'；
document.getElementById('myspan').style.display="none"; //inline or block to display again

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