hide or show something from checkbox in css/js

Question

I am trying to make a certain part of a form appear when one of two specific radio buttons are checked.

Here is the HTML for the radio buttons:

<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, is when the Kaiser or the Dolph buttons are checked, this form part 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've tryed so many many solutions that i'm a little bit lost here..

Here is something that works great, but only with two radio buttons:

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 really stuck here i'm trying to get it work for at least 5 hours.. so I wonder if there is a solution in CSS, or maybe in Javascript, but i prefer in CSS only.

There is no problem when trying something with just a checkbox or two radios, but with those 6 radios.

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

Answer 1

There's a couple of ways to make that div appear by checking specific radio buttons. The Snippet demonstrates 1 way by JavaScript and another way by CSS.

JS

Details

Forms Collection

This is old school way:

1. Reference the <form> element (you didn't have one, but you should).
   • var mainForm = document.forms[0];
   • forms will collect every <form> on a document. If there's only one <form> then it's form[0] to reference as DOM object. form[1] for the second <form> etc.
2. Next, reference mainForm's children form elements with .elements
   • var rad5 = mainForm.elements[5];
   • var rad6 = mainForm.elements[6];
3. Then setup an eventListener on mainForm for any click...
   • mainForm.addEventListener('click',...
4. ...and of course the event handler.
   • Condition: If the 5th or 6th radio button is checked... -if(rad5.checked || rad6.checked) {...
   • True: ...find the div.wnum...
   • var wnum = document.querySelector('.wnum');
   • ...and show it!
   • wnum.style.display = 'block';

CSS

Details

1. Arrange or find the right position that makes the condition (i.e. :checked) on the appropriate element (i.e. input[type="radio"])...

2. ...so that it is "in front" of the element you wish to affect (i.e. .wnum).

CAUSE: input:checked ~

EFFECT: div.wnum { display: block}

Since there weren't any classes or id's on the inputs, but we know where and what everything is, we'll use nth-of-type to sort out which radios are Kaiser and Dorph.

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

• :checked ][The state of Kaiser

• ~ ][Any sibling elements; Dorph, and wnum; think of it as referring to an element's "younger" brother and sisters or siblings that come afterwards.

• div or .wnum or div.num ][ The target

• {display:block} ][ The effect

In order to test the CSS, disable the 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 2

You could try to wrap everything in a container and on input (or label) toggle class of container. Based on this class you can toggle display: block or none to the hidden section, or do something simple like 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();
});

Answer 3

Suggested solution if you can change markup:

It is way better if you use a class in the inputs that trigger a form, like this:

.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 either of those 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 corresponding 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 4

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

Here's a solution with 6 radio button input elements and a div that only appears when either the 5th or 6th radio buttons is 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 is hidden by default with CSS

#section {
  display: none;
}

We then attach an event listener on each of the buttons to show/hide the #section element as necessary.

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 it: https://jsfiddle.net/reid_horton/3pfu8dtp/