选中单个复选框时按 id 显示 div

Question

我几天来一直在尝试，但就是无法让它发挥作用。也许有人可以帮忙:) 这个想法是，当用户单击特定的复选框时，会出现一个特定的 div。

因为输入和显示之间没有规律性，有时有更多的输入字段，有时要显示两个差异，我认为手动分配每个字段可能会更好。这是我的“假期”项目，我希望我能让它发挥作用......直到工作开始:)

我还希望它能够与其他输入一起使用：文本区域、单选、选择和输入。

checkbox 元素之间的唯一区别是 value="checkbox1" 完整元素是：

<input type="checkbox" name="versuch1" required="" **value="checkbox1"**>

div 看起来像这样，我可以为其分配 id：

`<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-71c1c46" data-id="71c1c46" data-element_type="column" **id="exampleoclumn1"**>



what I have:
`
</script>
// Element id
var checkbox1 = document.getElementTagName("checkbox1");
var checkbox2 = document.getElementTagName("checkbox2");
var checkbox3 = document.getElementTagName("checkbox3");

// Column id
var examplecolumn1 = document.getElementsById("examplecolumn1");
var examplecolumn2 = document.getElementById("examplecolumn2");
var examplecolumn3 = document.getElementById("examplecolumn3");

function updateColumnsDisplay() {
  examplecolumn1.style.display = checkbox1.checked ? "block" : "none";
  examplecolumn2.style.display = checkbox2.checked ? "block" : "none";
  examplecolumn3.style.display = checkbox3.checked ? "block" : "none";
}

// event listeners to checkboxes
checkbox1.addEventListener("change", updateColumnsDisplay);
checkbox2.addEventListener("change", updateColumnsDisplay);
checkbox3.addEventListener("change", updateColumnsDisplay);
`

This was one of the previous attemps:
`
</script>
//element id
var checkbox1 = document.getElementById("checkbox1"); 
var checkbox2 = document.getElementById("checkbox2"); 
var checkbox3 = document.getElementById("checkbox3"); 

//column id
var examplecolumn1 = document.getElementById("examplecolumn1"); 
var examplecolumn2 = document.getElementById("examplecolumn2"); 
var examplecolumn3 = document.getElementById("examplecolumn3"); 

examplecolumn1.addEventListener("change", () => {
    if(checkbox1.checked){
        example-column1.style.display = "block";
    if(checkbox2.checked){
        example-column2.style.display = "block";
    if(checkbox3.checked){
        example-column3.style.display = "block";
    }else{
        example-column1.style.display = "none";
        example-column2.style.display = "none";
        example-column3.style.display = "none";
    }
     })`

Answer 1

对于我的回答，我不使用 ID，而是使用数据属性。它们更容易使用，并且您可以重复使用同一个。

对于每个复选框，我添加一个数据目标数据属性。这将保存对适当内容 div 的引用。

我还创建了具有内容类和与复选框匹配的数据属性的 div。内容类通过 CSS 设置为不显示

我循环遍历这些复选框，并为每个复选框提供一个用于更改事件的事件处理程序。

然后在回调函数中我通过 event.target 获取更改后的复选框。然后我在 querySelectorAll 中使用它来定位具有类内容和匹配数据组属性的任何 div。

然后我循环遍历匹配的 div 并切换名为 active 的 CSS 类。活动类显示无。

const checkboxes = document.querySelectorAll("[data-target][type='checkbox']");

const processCheckboxes = (ev) => {
  const checkbox = ev.target;
  const contentDivs = document.querySelectorAll(".content[data-group='" + checkbox.dataset.target + "']")
  contentDivs.forEach((div) => div.classList.toggle("active"))
};

checkboxes.forEach((e) => e.addEventListener("change",processCheckboxes))

.content{display:none}
.content.active{display:block}

<input type="checkbox" name="versuch1" data-target="group1" value="checkbox1"> Group 1
<input type="checkbox" name="versuch1" data-target="group2" value="checkbox2"> Group 2
<input type="checkbox" name="versuch1" data-target="group3" value="checkbox3"> Group 3
<input type="checkbox" name="versuch1" data-target="group4" value="checkbox2"> Group 4

<div class="content" data-group="group1">1</div>
<div class="content" data-group="group2">2</div>
<div class="content" data-group="group3">3</div>
<div class="content" data-group="group4">4</div>
<div class="content" data-group="group4">Another 4</div>

Answer 2

只需将一个侦听器附加到所有输入，更改事件就会告诉您触发了哪一个。文本区域和文本输入将触发

onKeyUp

事件。

document.querySelectorAll("input").forEach(function(input){
  input.addEventListener("change", function(e){
    console.log(e.target.name)
  })
})