我正在使用CSS隱藏單選按鈕，但是我想使用Javascript將它們顯示在一頁上

Question

在Qualtrics上，我輸入了以下CSS以在整個調查中隱藏單選按鈕：

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

但是我希望它們顯示一頁。 我只能使用javascript來做到這一點。

可能嗎？

Answer 1

最簡單的方法之一是在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 2

無需添加jQuery庫。 Qualtrics使用prototype.js，您可以使用它。 只需將以下JavaScript添加到頁面上的第一個問題：

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

該代碼查找頁面上的所有單選按鈕並將其更改為可見。

Answer 3

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

$（'input [type = radio]'）。css（{visibility：'visible'}）;