使用涉及“ 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>