我使用CSS隐藏单选按钮，但我希望使用Javascript在一个页面上显示它们。

Question

在Qualtrics上，我输入了以下CSS来隐藏整个调查中的单选按钮：

input[type=radio]{
visibility: hidden;  
}

不过，我希望它们只显示一页。我只能使用javascript来完成这个任务。

有可能吗？

Answer 1

不需要添加jQuery库。Qualtrics使用prototype.js，您可以使用它。只需将以下JavaScript添加到页面上的第一个问题：

Qualtrics.SurveyEngine.addOnload(function() {
    $$('input[type=radio]').each(function(obj) {
        obj.style.visibility = 'visible';
    });
});

代码查找页面上的所有单选按钮，并将其更改为可见按钮。

Answer 2

要做到这一点，最简单的方法之一是在CSS中创建一个独立的类：

.hidden { visibility: hidden; }

然后根据需要添加或删除该类。例如：

document.getElementById("special-checkbox").classList.add('hidden');

如果您绝对必须像在您的问题中一样使用声明input[type=radio]，那么您可以使用相同的技术覆盖这个声明：

input[type=radio].shown {
  visibility: visible;
}

您将像上面一样使用javascript将shown类添加到那些未隐藏的项中。因为这个限定符比一般的选择器更具体，所以它将优先。

编辑

我错过了一些东西。如果希望隐藏或显示特定页面上的所有单选按钮，可以将类附加到DOM中的任何公共祖先，然后使用级联。例如，您可以将类show-radio附加到层次结构中较高的某个DIV标记(使用上面的技术)，然后下面的规则会将您的意图级联到所有的无线电输入。

show-radio input[type=radio] {
  visibility: visible;
}

这很好，因为您只需要为每个元素设置一次类，而不是一次。

Answer 3

使用jQuery，您可以：

$(‘inputtype=radio’).css({能见度：‘可见’})；