使用单选按钮显示div

Question

为了减少代码行数，我将代码简化为显示三个div。 我想要的是显示一个特定的div，同时隐藏其他两个div，具体取决于选中的单选按钮。

我实际上正在关注这两个链接

将事件侦听器添加到多个元素

如何检查JavaScript是否选择了单选按钮？

在第二个链接中，建议使用

radios[i].type === 'radio' && radios[i].checked

进行测试。

但是我将其修改为

DisplayOption[i].checked

因为所有我想我需要的。 我收到的错误是

未捕获的TypeError：无法读取未定义的属性“选中”

 const column = document.querySelector('.column'); const table = document.querySelector('.table'); const details = document.querySelector('.details'); onload = function() { const DisplayOption = document.getElementsByClassName("DisplayOption"); for (i = 0; i < DisplayOption.length; i++) { DisplayOption[i].addEventListener('click', function() { if (DisplayOption[i].checked) { if (displyOption[i].value === "column") { column.style.display = "grid"; table.style.display = "none"; table.details.style.display = "none"; } else if (displyOption[i].value === "table") { column.style.display = "none"; table.style.display = "block"; table.details.style.display = "none"; } else { column.style.display = "none"; table.style.display = "none"; table.details.style.display = "block"; } } }, false); } } 

 .column { display: grid; } .table { display: none; } .table.details { display: none; } 

 <input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked> <input type="radio" name="DisplayOption" value="table" class="DisplayOption"> <input type="radio" name="DisplayOption" value="details" class="DisplayOption"> <div class="column"> The first div is being displayed </div> <div class="table"> The second div is being displayed</div> <div class="table details"> The third div is being displayed </div> 

Answer 1

在eventListener内部，要引用被单击的元素，请使用this而不是DisplayOption[i] 。 另一个错误是使用table.details应该只是details 。 请参阅下面的更正演示：

 const column = document.querySelector('.column'); const table = document.querySelector('.table'); const details = document.querySelector('.details'); onload = function() { const DisplayOption = document.getElementsByClassName("DisplayOption"); for (i = 0; i < DisplayOption.length; i++) { DisplayOption[i].addEventListener('click', function() { if (this.checked) { if (this.value === "column") { column.style.display = "grid"; table.style.display = "none"; details.style.display = "none"; } else if (this.value === "table") { column.style.display = "none"; table.style.display = "block"; details.style.display = "none"; } else { column.style.display = "none"; table.style.display = "none"; details.style.display = "block"; } } }, false); } } 

 .column { display: grid; } .table { display: none; } .table.details { display: none; } 

 <input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked> <input type="radio" name="DisplayOption" value="table" class="DisplayOption"> <input type="radio" name="DisplayOption" value="details" class="DisplayOption"> <div class="column"> The first div is being displayed </div> <div class="table"> The second div is being displayed</div> <div class="table details"> The third div is being displayed </div> 

Answer 2

您可以使用CSS实现相同的目标！ 不需要JavaScript！

您可以在CSS中使用sibling （〜）选择器并显示相应的div

 div { display: none; } input[value="column"]:checked~.column, input[value="table"]:checked~.table, input[value="details"]:checked~.details { display: block; } 

 <input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked> <input type="radio" name="DisplayOption" value="table" class="DisplayOption"> <input type="radio" name="DisplayOption" value="details" class="DisplayOption"> <div class="column"> The first div is being displayed </div> <div class="table"> The second div is being displayed</div> <div class="details"> The third div is being displayed </div> 

JSFiddle链接