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

Posted 2023-05-07

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

【英文标题】：Problem using if/then command with "checkbox.checked === true" to hide/show an element when there's another checkbox involved

【发布时间】：2019-06-04 02:36:19

【问题描述】：

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()仅在时显示“one”当前未选择“两个”的单选按钮）。我选择单选按钮来显示“二”而不是“一”，效果很好。但是当我取消选中并重新选中该框以显示“c”时，当它应该显示“two”时出现“one”。

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

【问题讨论】：

我认为你应该用比这个少得多的字眼来表达这个问题，否则没有人会读完这一切，他们只会转移到另一个问题。

(one.style.display = "block") && (two.style.display = "none");那是什么 ？？如果 showDiv 不起作用，我是否理解尝试让你成为 if else like if(....) two.style.display = "block"; one.style.display = "none" ....

我觉得你的方法有点太复杂了。您不需要不断地重置可见性状态。让收音机做并记住他们的事情，让复选框只影响整个收音机/标签部分的整体可见性（例如，使用一些容器元素）。这是一个快速演示：jsfiddle.net/xLkf9peo

【参考方案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>

【讨论】：

感谢您的回答。这会很好用，除了我希望在第一次选中复选框时默认显示“一个”。另外，我不能做通用 querySelector('input') 或 querySelector('input[type="radio"]') 因为我在同一页面上有大量其他复选框和单选按钮应该做其他事情选择时。在这里执行 querySelector 是否重要/仅通过 ID 获取它们有任何问题吗？还有一个问题。在您拥有的 showdiv() 函数中，querySelectorAll() 和 .forEach() 是否替换了我原来的 for 循环？

你也可以用ID代替querySelector或querySelectorAll是的。我只是假设上面是完整的代码。无论如何，让我编辑答案，以便默认显示one。等等。

@voidflaw 答案已更新。您可以在此 JSFiddle 或上面的 代码片段 上查看新代码。

请将此标记为正确答案，如果它帮助您解决问题，请点赞。干杯男人！

等待，抱歉 - 我只是运行了新的代码并单击复选框时没有显示“两个”，当检查第二个单选按钮时:(这是我拥有的困难，制作“一个” 在第二个单选按钮未被选中的条件下触发 showdiv() 时显示。你知道如何解决这个问题吗？我尝试在 showdiv 中使用 if/then 语句() 函数，以 (radio2.checked === true) 为条件，但它不起作用，所以也许我做错了什么。