Detect if radio button is checked using if else statement condition

Question

I want to know why if and else if are not working.

I know there are many similar questions out there but they are mostly about jquery and php, not pure javascript. There's one question very similar to mine:

JavaScript - Using "checked/unchecked checkbox" as "IF ELSE condition statement"

But even there I copied the code, and the if and else if statements don't work.

var label = document.getElementsByTagName("label");

var show = () => {
  var c1h = document.getElementById("c1h");
  var th = document.getElementById("th");
  var c2h = document.getElementById("c2h");
  var c3h = document.getElementById("c3h");

  var c1 = document.getElementById("c1");
  var t = document.getElementById("t");
  var c2 = document.getElementById("c2");
  var c3 = document.getElementById("c3");

  if (c1h.checked === true) {
    c1.style.visibility = "visible";
  } else if (th.checked === true) {
    t.style.visibility = "visible";
  } else if (c2h.checked === true) {
    c2.style.visibility = "visible";
  } else if (c3h.checked === true) {
    c3.style.visibility = "visible";
  }
}

label.onclick = show;

p {
  width: 250px;
}

label {
  display: block;
}

.tick,
.cross {
  width: 20px;
  height: 20px;
  float: right;
  visibility: hidden;
}

<h2>What is a snail?</h2>
<form>
  <label>A: Insect<input id="c1h" name="assassin" 
    class="radio" type="radio" checked="checked" /><img id="c1" 
    class="cross" src="images/cross.png" /></label>
  <br />
  <label>B: Mollusc<input id="th" name="assassin" 
    class="radio" type="radio" /><img id="t" class="tick" 
    src="images/tick.png" /> 
            </label>
  <br />
  <label>C: Amphibian<input id="c2h" name="assassin" 
    class="radio" type="radio" /><img id="c2" class="cross" 
    src="images/cross.png" /></label>
  <br />
  <label>D: Mammal<input id="c3h" name="assassin" 
    class="radio" type="radio" /><img id="c3" class="cross" 
    src="images/cross.png" /></label>
</form>

if any of the if or else if statements are true then the corresponding image should get displayed, but it does not.

You have an error in the console - `label` is never declared. — VLAZ, Sep 27 '19 at 16:21
Once it is declared, make sure you _first_ defined what `show` is, and _then_ assign it to the `onclick`. You now assign an `undefined` variable to the `onclick`. This seems to have little to do with the `if`/`else`s. — Ivar, Sep 27 '19 at 16:28
@Ivar how is it undefined. I have clearly defined the arrow function as `var show`. The sequence doesn't matter. I've tried it both ways. — Danicore, Sep 28 '19 at 05:18
You probably define `label` in HEAD, before the DOM has even loaded. Place your code at the bottom of the page and it should work. You should had noticed this if you opened the console to see if there were any error messages. — Rickard Elimää, Sep 28 '19 at 05:28
Thanks @RickardElimää but there are no error messages. I have placed the `script` tag at the bottom inside the body. — Danicore, Sep 28 '19 at 05:32
@RickardElimää I've tried `onclick =show()` as well. It doesn't work either. Plus I read somewhere that u use `onClick = "show()";` in inline javascript (Javascript inside html tags). But in scripting approach (standalone javascript) you use `onclick = show;`. — Danicore, Sep 28 '19 at 05:39
@Danicore start with a simple example. Make the simplest version of the checkbox program first, then build up slowly while checking often that things are working the way you think they are. The way you are working now may lead you to face many problems of unexpected origin. For example, images not loading because of non-existent relative paths .. etc — Samie Bencherif, Sep 28 '19 at 05:42
"_The sequence doesn't matter._" @Danicore For arrow functions it does matter. [Function declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function) are hoisted to the top, so if you use those, it indeed doesn't matter, but that is not the case for arrow-functions/function expressions. Those are only initialized after the assignment line is executed. See https://jsfiddle.net/Ivar_K/0eq5jg2z/ — Ivar, Sep 28 '19 at 10:50
Also note that `onclick` applies to one element, where `getElementsByTagName` returns a collection of elements. You will need to loop over that collection and apply the `onclick` to each element separately. See [What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Ivar, Sep 28 '19 at 10:54

score 0 · Answer 1 · answered Sep 28 '19 at 05:45

If what your example is the only thing that you need to do, namely see the right answer straight away when clicking on a radio button, then it's possible to achieve that with pure CSS.

p {
  width: 250px;
}

label {
  display: block;
  margin-bottom: 1rem;
}

.tick,
.cross {
  width: 20px;
  height: 20px;
  float: right;
  visibility: hidden;
}

/* see if a radio button is checked, then select any sibling (~) (or "+" if it's the sibling next to it, which is the case here) */
input[type="radio"]:checked ~ .tick,
input[type="radio"]:checked ~ .cross {
  visibility: visible;
}

<h2>What is a snail?</h2>
<form>
  <label>A: Insect<input name="assassin" 
    type="radio"  /><img 
    class="cross" src="images/cross.png" /></label>
  <label>B: Mollusc<input name="assassin" 
    type="radio" />
    <img class="tick" 
    src="images/tick.png" /> 
            </label>
  <label>C: Amphibian<input name="assassin" 
    type="radio" /><img class="cross" 
    src="images/cross.png" /></label>
  <label>D: Mammal<input name="assassin" 
    class="radio" type="radio" /><img class="cross" 
    src="images/cross.png" /></label>
</form>

Detect if radio button is checked using if else statement condition

1 Answers1