Question 215917 in Html Question posted in
Some basic documentation can be found here.

Html – Display div by id when single checkbox is selected

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.

Because there is no regularity between inputs and display, sometimes more input fields, sometimes two difs to display, I thought it’s maybe 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";
    }
     })`
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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)
  })
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search