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

qeeaahzv 于 11个月前发布在其他

关注(0)|答案(2)|浏览(113)

我已经试了好几天了，就是不能让它工作。也许有人可以帮助：）这个想法是，当用户点击特定的复选框，一个特定的div出现。此脚本将以剪切形式运行。div已经存在，不能更改，但id除外。
由于输入和显示之间没有规律性，有时需要显示更多的输入字段，有时需要显示两个div，我认为手动分配每个div可能更好。这是我的“假期”项目，我希望我能让这个工作...直到工作开始：）
我还想这与其他输入功能：文本区域、收音机、选择和输入。
checkbox element is value=“checkbox1”full element的唯一区别是：第一个月
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";
    }
     })`

字符串

Html

来源：https://stackoverflow.com/questions/76766432/display-div-by-id-when-single-checkbox-is-selected

2条答案

按热度按时间

lsmepo6l1#

对于我的答案，我使用数据属性而不是使用ID。它们更容易使用，您可以重复使用同一个。
对于每个复选框，我添加一个data-target数据属性。这将保存对适当内容div的引用。
我还创建了具有内容类和与复选框匹配的数据属性的div。通过CSS将内容类设置为不显示
我循环遍历这些复选框，并为每个复选框指定一个change事件的事件处理程序。
然后在回调函数中，我通过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>

赞(0）回复(0）举报 11个月前

46scxncf2#

只需为所有输入附加一个侦听器，change事件就会告诉您触发了哪一个。Textarea和text input将触发onKeyUp事件。

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

字符串

赞(0）回复(0）举报 11个月前

我来回答

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

2条答案

相关问题

热门标签

最新问答