Hide or show something from a checkbox in css / js

Question

I am trying to make a specific part of the form if one of the two specific radio buttons is set.

Here is the HTML for the switches:

<strong>Window:</strong><br> <input type="radio" name="wname" value="Hann" checked> Hann <input type="radio" name="wname" value="Hamming"> Hamming <input type="radio" name="wname" value="Bartlett"> Bartlett <input type="radio" name="wname" value="Rectangular"> Rectangular <input type="radio" name="wname" value="Kaiser"> Kaiser <input type="radio" name="wname" value="Dolph"> Dolph<p> 

What I want, when the Kaiser or Dolph buttons are checked, this form appears:

 <div class="wnum"> <strong>1. Window adjust parameter (-10 - 10):</strong><br> <select name="selectbox"> {% for i in range(-10,11): %} <option value="{{ i }}">{{ i }}</option> {% endfor %} </select><p> </div> 

I tried so many many solutions that I lost a little here.

Here's what works great, but with only two switches :

HTML:

 <input type=radio id="show" name="group"> <input checked type=radio id="hide" name="group"> <label id="id1" for="show"><span id="id1"> <div class="wnum"> <strong>1. Window adjust parameter (-10 - 10):</strong><br> <select name="selectbox"> {% for i in range(-10,11): %} <option value="{{ i }}">{{ i }}</option> {% endfor %} </select><p> </div> </span></label> <label id="id2" for="hide"><span id="id2"> <div class="wnum"> <strong>2. Window adjust parameter (-10 - 10):</strong><br> <select name="selectbox"> {% for i in range(-10,11): %} <option value="{{ i }}">{{ i }}</option> {% endfor %} </select><p> </div> 

CSS:

 input#show:checked ~ label#id1{ display:none; } input#show:checked ~ label#id2{ display:block; } input#hide:checked ~ label#id2{ display:none; } input#hide:checked ~ label#id1{ display:block; } 

I'm just really stuck here, I'm trying to get it to work for at least 5 hours. So I wonder if there is a solution in CSS or possibly in Javascript, but I prefer only CSS.

There is no problem trying something with just a checkmark or two radio stations, but with these 6 radio stations.

So far I have tried these input[class="hiden-wnum"]:checked solutions, those input:not(:checked) + label#something solutions and two or three different Javascript solutions, but no one worked.

Answer 1

Suggested solution if you can change the markup:

This is better if you use the class in inserts that invoke the form, for example:

 .triggers-form:checked + .wnum { display: block; } .wnum { display: none; } 

JSFIDDLE

 .triggers-form:checked + .wnum { display: block; } .wnum { display: none; } 

 <strong>Window:</strong> <br> <input type="radio" name="wname" value="Hann" checked>Hann <input type="radio" name="wname" value="Hamming">Hamming <input type="radio" name="wname" value="Bartlett">Bartlett <input type="radio" name="wname" value="Rectangular">Rectangular <input class="triggers-form" type="radio" name="wname" value="Kaiser">Kaiser <div class="wnum"> <strong>Kaiser Form Appears : 1. Window adjust parameter (-10 - 10):</strong> <br> <select name="selectbox"> {% for i in range(-10,11): %} <option value="{{ i }}">{{ i }}</option> {% endfor %} </select> </div> <input class="triggers-form" type="radio" name="wname" value="Dolph">Dolph <div class="wnum"> <strong>Dolph Form Appears : 1. Window adjust parameter (-10 - 10):</strong> <br> <select name="selectbox"> {% for i in range(-10,11): %} <option value="{{ i }}">{{ i }}</option> {% endfor %} </select> </div> 

---

If you want to display the same form when any of them is selected, you can do this:

 input[value=Kaiser]:checked ~ .wnum, input[value=Dolph]:checked ~ .wnum { display: block; } .wnum { display: none; } 

JSFIDDLE

 input[value=Kaiser]:checked ~ .wnum, input[value=Dolph]:checked ~ .wnum { display: block; } .wnum { display: none; } 

 <strong>Window:</strong> <br> <input type="radio" name="wname" value="Hann" checked>Hann <input type="radio" name="wname" value="Hamming">Hamming <input type="radio" name="wname" value="Bartlett">Bartlett <input type="radio" name="wname" value="Rectangular">Rectangular <input type="radio" name="wname" value="Kaiser">Kaiser <input type="radio" name="wname" value="Dolph">Dolph <div class="wnum"> <strong>1. Window adjust parameter (-10 - 10):</strong> <br> <select name="selectbox"> {% for i in range(-10,11): %} <option value="{{ i }}">{{ i }}</option> {% endfor %} </select> </div> 

---

If you want to display different forms, each of which corresponds to the selected checkbox, you can do this:

 input[value=Kaiser]:checked + .wnum, input[value=Dolph]:checked + .wnum { display: block; } .wnum { display: none; } 

JSFIDDLE

 input[value=Kaiser]:checked + .wnum, input[value=Dolph]:checked + .wnum { display: block; } .wnum { display: none; } 

 <strong>Window:</strong> <br> <input type="radio" name="wname" value="Hann" checked>Hann <input type="radio" name="wname" value="Hamming">Hamming <input type="radio" name="wname" value="Bartlett">Bartlett <input type="radio" name="wname" value="Rectangular">Rectangular <input type="radio" name="wname" value="Kaiser">Kaiser <div class="wnum"> <strong>Kaiser Form Appears : 1. Window adjust parameter (-10 - 10):</strong> <br> <select name="selectbox"> {% for i in range(-10,11): %} <option value="{{ i }}">{{ i }}</option> {% endfor %} </select> </div> <input type="radio" name="wname" value="Dolph">Dolph <div class="wnum"> <strong>Dolph Form Appears : 1. Window adjust parameter (-10 - 10):</strong> <br> <select name="selectbox"> {% for i in range(-10,11): %} <option value="{{ i }}">{{ i }}</option> {% endfor %} </select> </div> 

Answer 2

For something like this, your life will be much easier if you use JavaScript.

Here is a solution with 6 input and div switch elements that only appears when 5 or 6 switches are selected.

 <div id="buttons"> <input type="radio" name="group" value="1" checked> Button 1 <br> <input type="radio" name="group" value="2"> Button 2 <br> <input type="radio" name="group" value="3"> Button 3 <br> <input type="radio" name="group" value="4"> Button 4 <br> <input type="radio" name="group" value="5"> Button 5 <br> <input type="radio" name="group" value="6"> Button 6 <br> </div> <div id="section"> This section should only be visible when either button 5 or button 6 is selected. </div> 

#section hides by default with CSS

 #section { display: none; } 

Then we attach an event listener on each of the buttons to show / hide the #section element as needed.

 var buttons = document.querySelector("#buttons").querySelectorAll("input"); var section = document.querySelector("#section"); for (var i = 0; i < buttons.length; i++) { setListenerOnButton(i); } function setListenerOnButton(i) { buttons[i].addEventListener("click", function (event) { if (i == 4 || i == 5) { section.style.display = "initial"; } else { section.style.display = "none"; } }); } 

Here's a JSFiddle that demonstrates this: https://jsfiddle.net/reid_horton/3pfu8dtp/

Answer 3

There are several ways to make this div by specifying specific radio buttons. The snippet demonstrates one JavaScript method and another using CSS.

Js

More details

Shape collection

This is the old school way:

• Link to the <form> element (you do not have it, but you need it).
  • var mainForm = document.forms[0];
  • forms will collect every <form> in the document. If there is only one <form> , then it form[0] referenced as a DOM object. form[1] for the second <form> , etc.
• Next, the mainForm children links form elements with .elements
  • var rad5 = mainForm.elements[5];
  • var rad6 = mainForm.elements[6];
• Then set eventListener to mainForm for any click ...
  • mainForm.addEventListener('click',...
• ... and, of course, an event handler.
  • Status: if the 5th or 6th radio button is installed ... - if(rad5.checked || rad6.checked) {...
  • True: ... find div.wnum ...
  • var wnum = document.querySelector('.wnum');
  • ... and show it!
  • wnum.style.display = 'block';

CSS

More details

• Position or find the correct position that makes the condition (ie :checked ) on the corresponding element (ie input[type="radio"] ) ...

• ... so that it is “in front” of the element you want to influence (i.e. .wnum ).

REASON: input:checked ~

EFFECT: div.wnum { display: block}

Since there were no classes or identifiers on the inputs , but , we know where and what all that is, we will use nth-of-type to sort which radio stations are Kaiser and Dorph.

• input:nth-of-type(5) ] [Kaiser

• :checked ] [Kaiser state

• ~ ] [Any elements of a brother; Dorph and wnum; think about it, referring to the element of the "younger" brother and sisters or siblings that come later.

• div or .wnum or div.num ] [Target

• {display:block} ] [Effect

To test CSS, disable JS (directions in source).

SNIPPET

 /* FORM (remove to disable JS ->)*/ var mainForm = document.forms[0]; // KAISER var rad5 = mainForm.elements[5]; // DOLPH var rad6 = mainForm.elements[6]; // EVENT LISTENER & HANDLER mainForm.addEventListener('click', function(e) { // CONDITION if (rad5.checked || rad6.checked) { var wnum = document.querySelector('.wnum'); wnum.style.display = 'block'; } }, false); 

 .wnum { display: none; } input:nth-of-type(5):checked ~ div { display: block; } input:nth-of-type(6):checked ~ .wnum { display: block; } 

 <form id='main' name='main'> <fieldset> <legend><b>Window: </b> </legend> <input type="radio" name="wname" value="Hann" checked> <label>Hann</label> <input type="radio" name="wname" value="Hamming"> <label>Hamming</label> <input type="radio" name="wname" value="Bartlett"> <label>Bartlett</label> <input type="radio" name="wname" value="Rectangular"> <label>Rectangular</label> <input type="radio" name="wname" value="Kaiser"> <label>Kaiser</label> <input type="radio" name="wname" value="Dolph"> <label>Dolph</label> <div class="wnum"> <label><b>1. Window adjust parameter (-10 - 10): </b> </label> <br> <select name="selectbox"> {% for i in range(-10,11): %} <option value="{{ i }}">{{ i }}</option> {% endfor %} </select> </div> </fieldset> <form> 

Answer 4

You can try to wrap everything in the container and at the input (or label) switch the container class. Based on this class, you can switch display: block or none to a hidden section or do something as simple as this with jquery:

 <input type="radio" id="open-section" /> <input type="radio" id="something-else" /> <input type="radio" id="some-more" /> <div id="section" style="display: none;"></div> $('#open-section').click(function () { $("#section").show(); });