Display div by id when single checkbox is selected

Question

I'm trying since days and I just cant get this to work. Maybe someone can help :) The idea is, that when user clicks on specific checkbox, a specific div appears. This script will run as snipped. Divs are already existing and cannot be changed, exept the id.

Because there is no regularity between inputs and display, sometimes more input fields, sometimes two divs to display, I thought it's possibly better to assign each manually. This was my "Vacation"-Project and i hope i can get this to work... till work starts :)

Also I'd like this to function with other inputs : textarea, radio, select and input.

The only difference between checkbox element is value="checkbox1" full element is: <input type="checkbox" name="versuch1" required="" **value="checkbox1"**>

the divs look like this and I can assign id to it:

`<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";
    }
     })`

Your example is currently missing the relevant html, and has many syntax errors. For example, `getElementTagName()` and `getElementsById()` are not valid methods. I highly recommend you learn to use a debugger and post a minimal reproducible example here. — mykaf, Jul 25 '23 at 21:09
Does this answer your question? [Show/hide div if checkbox selected](https://stackoverflow.com/questions/18421082/show-hide-div-if-checkbox-selected) — Heretic Monkey, Jul 25 '23 at 21:23
those methods worked before. And still do. the relevant html is already existing, there is no possibility to change it. It can only be selected by it's id. — huronsen, Jul 26 '23 at 09:12
I don't know how to be clearer, but the script you included above *will not run*. Maybe you have some typos from your actual code, but it's not helpful to us if the typos here make it break. — mykaf, Jul 26 '23 at 14:04

score 0 · Answer 1 · answered Jul 25 '23 at 21:08

For my answer, instead of using IDs I use data attributes. They are easier to use and you can reuse the same one.

For each checkbox, I add a data-target data attribute. This will hold a reference to the appropriate content divs.

I also created divs that have the class of content and a data attribute matching a checkbox. The content class is set to display none via CSS

I loop through these checkboxes and give each one an event handler for the change event.

Then in the call back function I get the changed checkbox via event.target. Then I use that in a querySelectorAll to target any divs with the class content and the matching data group attribute.

I then loop through the matching divs and toggle a CSS class called active. The active class has a display of none.

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>

thank you for your answer! the problem is though, i cannot create/ change the divs, they already exist. I have to hide them based on attribute. — huronsen, Jul 26 '23 at 09:08

score 0 · Answer 2 · answered Jul 25 '23 at 21:13

Just attach a listener to all inputs and the change event will tell you which one fired. Textarea and text inputs will fire onKeyUp event.

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

Display div by id when single checkbox is selected

2 Answers2