使用涉及“ checkbox.checked === true”的if / then命令在涉及另一個復選框時隱藏/顯示元素時出現問題

Question

TL; DR：如果所有單選按鈕都為空白，如何具有顯示某個div元素的復選框，但是如果您選擇了某個單選按鈕，則選中該復選框將顯示不同的div元素。 我擁有的代碼無法正常工作，我也不知道為什么。

抱歉，這將是一個非常漫長而復雜的問題。 我有一個復選框可以顯示或隱藏div元素類（“ c”），具體取決於是否已選中該復選框，效果一直很好。 我在頁面其他位置也有兩個單選按鈕，當選中它們時（假設還選擇了“ c”），每個按鈕都顯示位於“ c”元素之一內部的不同div元素-我們將這些內部div稱為“一”和“二”。 那些也很好。

默認情況下，選中此復選框時，即使尚未選擇任何一個單選按鈕，也會顯示“一個”。 如果有人選中該復選框，然后單選按鈕為“兩個”，則“一個”消失，而“兩個”取而代之。 我的困難是：如果有人選中“ c”（從而也顯示“一個”），然后選擇單選按鈕以顯示“兩個”而不是“一個”， 取消選中“ c”，然后再次選中它 ，我想要“重新出現兩個”而不是“一個”。 換句話說，我想在選中“ c”時仍默認顯示“一個”，但我也想使其保持選中狀態，以便如果已經選擇了“兩個”單選按鈕並且未選中該復選框，請單擊該復選框。將顯示“兩個”而不是“一個”。

對於該復選框，我只有一個onclick函數，該函數在每次單擊該復選框時都會隱藏或顯示“ c”（通過display：none / display：block）。 這兩個單選按鈕的工作方式相同（除了必須選中該復選框，以使“ w”或“ d”實際顯示，因為如果隱藏了“ c”，則它們也會被隱藏）。

現在，隱藏/顯示“ c”的onclick函數表示，如果選擇了“兩個”單選按鈕，則應該顯示“兩個”；否則，將顯示“兩個”。 如果不是，則應顯示“一個”。 （這是我默認情況下使“一個”顯示的方式，而不強制每次單擊該復選框都顯示它，因為加載頁面時未選中任何一個單選按鈕。）出於某種原因，它不起作用，我也不明白為什么。

同樣，不確定這是否重要，但是單選按鈕位於“ c”元素之一中，僅在單擊復選框時才會顯示。 無論如何，這是我的代碼的相關部分：

HTML：

<input type="checkbox" onclick="showdiv()"> Checkbox to show all divs in the class 'data'

<div class="data" style="display:none;">
<input type="radio" id="radio1" name="a" onclick="one()"> Radio button to show first div
<input type="radio" id="radio2" name="a" onclick="two()"> Radio button to show second div
</div>

<div class="data" style="display:none;">
<div id="one" style="display:none;">first div</div>
<div id="two" style="display:none;">second div</div>
</div>

Javascript：

<script type="text/javascript">

var data = document.getElementsByClassName("data");
var one = document.getElementById("one");
var two = document.getElementById("two");

function one() {
    one.style.display = "block";
    two.style.display = "none";
}

function two() {
    two.style.display = "block";
    one.style.display = "none";
}

function showdiv() {
    for(var i = 0; i < data.length; i++) {
        data[i].style.display === "none" ?
        data[i].style.display = "block" :
        data[i].style.display = "none";}
    var checktwo = document.getElementById("radio2");
    if (checktwo.checked === true) {
        (two.style.display = "block") &&
        (one.style.display = "none");}
    else {
        (one.style.display = "block") &&
        (two.style.display = "none");}
}

</script>

這是怎么回事：我選中該復選框以顯示“ c”，並且默認情況下會顯示“一個”（因為應該這樣做，因為函數showdiv（）表示僅當 “兩個”單選按鈕未顯示時才顯示“一個”當前選擇）。 我選擇單選按鈕以顯示“兩個”而不是“一個”，並且效果很好。 但是，當我取消選中並再次選中顯示“ c”的框時，應在顯示“兩個”時顯示“一個”。

希望這是一個簡單的修復方法-我基本上是學習Javascript來做我正在研究的事情，而我仍在尋找基本的東西，所以也許我只是錯過了一些簡單的事情。 我將永遠感謝任何可以幫助我解決這個問題的人。

Answer 1

您正在創建太多的功能，僅用於切換一個級別的深層嵌套div。 另外，您應該避免使用內聯on* handlers （onclick，oninput等），而應將它們替換為event listeners ，如下所示：

您只需要兩個功能：

• 一個函數說， showdiv()用於在單擊第一個輸入時切換主div，
• 另一個函數showInnerDiv()用於切換#one和#two div。

檢查並運行下面的代碼片段 ，以獲取上述示例：

 var input = document.querySelector('input'); // retrieve first input var innerBtns = document.querySelectorAll('input[type^="radio"]'); // retrieve the radio buttons function showdiv() { var data = document.querySelectorAll(".data"); // retrieve both .data divs data.forEach(x => { //use forEach to toggle the display of each .data div x.style.display = (x.style.display === "none") ? "block" : "none"; }); document.getElementById("one").style.display = "block"; document.getElementById("two").style.display = "none"; } function showInnerDiv() { var one = document.getElementById("one"); var two = document.getElementById("two"); var checktwo = document.getElementById("radio2"); if (checktwo.checked === true) { two.style.display = "block"; one.style.display = "none"; } else { one.style.display = "block"; two.style.display = "none"; } } input.addEventListener("click", showdiv); innerBtns.forEach(btn => { //use forEach to add a click listener to each radio button btn.addEventListener("click", showInnerDiv); }) 

 #one {background-color:red; padding: 10px;margin-top: 10px;} #two {background-color:yellow; padding: 10px;margin-top: 10px;} 

 <input type="checkbox"> Checkbox to show all divs in the class 'data' <div class="data" style="display:none;"> <input type="radio" id="radio1" name="a"> Radio button - first div <input type="radio" id="radio2" name="a"> Radio button - second div </div> <div class="data" style="display:none;"> <div id="one" style="display:none;">first div</div> <div id="two" style="display:none;">second div</div> </div>