javascript - 我正在使用 CSS 隐藏单选按钮，但我想使用 Javascript 在一个页面上显示它们

Question

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

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

但是我希望它们显示一页。我只能使用 javascript 来做到这一点。

可能吗？

score 2 · Accepted Answer

实现这一点的最简单方法之一是在 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;
}

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

score 1 · Accepted Answer

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

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

代码找到页面上的所有单选按钮并将它们更改为可见。

score 0 · Accepted Answer

0

使用 jQuery，您可以执行以下操作：

$('input[type=radio]').css({visibility: 'visible'});

于 2015-04-24T00:02:24.347 回答

3 回答 3