javascript - 当涉及另一个复选框时，使用带有“checkbox.checked === true”的 if/then 命令隐藏/显示元素时出现问题

Question

TL;DR：如果所有单选按钮都是空白的，如何有一个显示某个 div 元素的复选框，但是如果您选择了某个单选按钮，当您选中它时它将显示不同的 div 元素。我的代码不起作用，我不知道为什么。

抱歉，这将是一个非常漫长而复杂的问题。我有一个复选框，它显示或隐藏一类 div 元素（“c”），具体取决于是否选中了复选框，这一直工作正常。我还有两个位于页面其他位置的单选按钮，当被选中时（假设“c”也被选中），每个按钮都显示位于“c”元素之一内的不同 div 元素 - 我们称这些内部 divs“一”和“二”。那些工作也很好。

默认情况下，当复选框被选中时，会显示“一个”，即使尚未选择任何单选按钮。如果有人选中复选框，然后选中“二”的单选按钮，“一”就会消失，而“二”会取而代之。我的困难是：如果有人选中“c”（因此也显示“one”），然后选择单选按钮显示“two”而不是“one”，取消选中“c”然后再次选中，我想要“二”重新出现而不是“一”。换句话说，当“c”被选中时，我仍然希望默认显示“one”，但我也想这样做，如果“two”的单选按钮已经被选中并且复选框未被选中，

对于复选框，我只有一个 onclick 函数，每次单击复选框时都会隐藏或显示“c”（通过 display:none / display:block）。这两个单选按钮的工作方式相同（除了必须选中复选框才能真正显示“w”或“d”，因为如果“c”被隐藏，它们就会被隐藏）。

现在，隐藏/显示“c”的 onclick 函数表示，如果选择了“two”的单选按钮，则应该显示“two”；如果没有，那么应该出现“一个”。（这就是我默认显示“one”的方式，而不是在单击复选框时强制它出现，因为加载页面时没有选择单选按钮。）由于某种原因，它不起作用，我不明白为什么.

此外，不确定这是否重要，但单选按钮位于“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”，并且默认情况下出现“one”（因为它应该，因为函数 showdiv() 表示仅当“two”的单选按钮不是时才显示“one”当前选择）。我选择单选按钮以显示“二”而不是“一”，效果很好。但是当我取消选中并重新选中显示“c”的框时，“一个”出现在它应该显示“两个”的时候。

希望这是一个简单的修复 - 我基本上学习了 Javascript 只是为了制作我正在研究的这个东西，而且我还在弄清楚基本的东西，所以也许我只是错过了一些简单的东西。我会永远感激任何可以帮助我解决这个问题的人。

标签： javascript

Answer 1

您正在创建太多函数来切换一层深的嵌套 div。此外，您应该避免使用内联on* handlers（onclick、oninput 等）并将它们event listeners替换为，如下所示：

您只需要两个功能：

• 一个函数说，showdiv()用于在单击第一个输入时切换主 div 并且，
• 另一个功能说，showInnerDiv()用于切换#one和#twodiv。

检查并运行下面的代码片段以获取上述的实际示例：

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>