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

Question

我正在寻找一种使用JavaScript来显示/隐藏单选按钮组中某些单选按钮的方法。如何实现这一点？谢谢。

- LogInIssue

Answer 1

id属性用于标识单个单选按钮，而它们都会通过name属性与组相关联。

您可以使用类似以下的方式获取单个单选按钮：

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

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

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

- anonymous

---

最好设置显示属性，因为隐藏仍然占用空间。 - rahul

我尝试过这个方法。它只隐藏了控件，但没有隐藏紧随单选按钮后面的文本。我该如何隐藏那段文本？ - LogInIssue

@登录问题：您可以通过将文本包装在<span>或<div>中并为包装元素指定一个ID来以相同方式隐藏文本。 - Peter Di Cecco

每个文本条目不是都与控件绑定了吗？ - LogInIssue

实际上不是这样的。我会创建像这样的单选按钮-<input id="radioButton1" type="radio">ChoiceText…因此，文本是分开的。正如 weenaak 所说，将它们放在 span 或 div 中并隐藏/显示它们也可以...<input id="radioButton1" type="radio" /><span id="radioText1">Choice</span> - anonymous

另外，我所说的是纯HTML / JavaScript。UI框架可以让您在单个函数调用中完成所有这些操作。 - anonymous

Answer 2

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

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

- karim79

---

这似乎隐藏了控件，但没有隐藏控件后面的文本。我如何也隐藏文本？ - LogInIssue

对于那个也要做同样的事情，例如：document.getElementById('myTextElementId').style.display = 'none'; - karim79

Answer 3

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

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

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

- VoteyDisciple

Answer 4

将CSS类应用于单选按钮，然后使用循环为每个单选按钮设置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';

- Russ Cam

Answer 5

其他人都已经说得很好了，所以我要为框架做个广告。

使用jQuery、MooTools或其他框架可以使这变得非常容易：

MooTools：

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

或者

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

- Ryan Florence

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

- Arun P Johny