hide-unhide with radio button

Question

Im trying to unhide div id=Q3 with my first 2 radio inputs (id= Q1 & id = Q2)

if (Q1 = Ja and Q2 = Ja) show Q3.

Can somebody please help me!

See my html code below (sorry for the bad coding im a totally noob!).

HTML

<body>

<header>
    <h2>Helpdesk</h2>
    <div>Wat is u probleem?</div>
</header>

<form>

<h4>Kunt computer normaal aanzetten?<span class = "req" id= "req_Q1">*</span></h4>
<input type="radio" name="A1" id="A1" value ="Ja" /> : Ja<br />
<input type="radio" name="A1" id="A2" value ="Nee" /> : Nee<br />

<p class= "instruct" id="instruct_Q1">
<small>Controleer eerst de kabels!</small>
</p>


<h4 id= "Q2">Geeft de monitor normaal beeld?<span class = "req" id= "req_Q2">*</span> </h4>
<input type="radio" name="A2" id="A3" /> : Ja<br />
<input type="radio" name="A2" id="A4"/> : Nee<br />

<p class= "instruct" id="instruct_Q2">
<small>Controleer eerst de kabels!</small>
</p>
</div>

<div id= "Q3" style="display: none;">
<label for ="Q3.1" ><h4>Start windows normaal op?</h4></label>
<select name="Q3.1">
    <option value="A3.1" >Ja, geen probleem</option>
    <option value="A3.2" >Ja, maar met foutmelding</option>
    <option value="A3.3" >Nee, zwart scherm</option>
    <option value="A3.4" >Nee, blauw scherm</option>
</select>
</div>

<div style="display: none;"> 
<h4>Kunt u inloggen?</h4>
<input type="radio" name="Q4" />Ja, geen probleem<br />
<input type="radio" name="Q4" /> Nee, ik krijg een foutmelding<br />
</div>

<div style="display: none;"> 
<h4>Ik krijg de volgende foutmelding <span class = "req" id= "req_Q5">*</span></h4>
<input type="radio" name="Q5" />Kan u niet aanmelden bij het domein. Controleer of uw gebruikersnaam en/of toegangscode correct zijn.<br />
<input type="radio" name="Q5" />Kan u niet aanmelden omdat het domein niet beschikbaar is. <br />
<input type="radio" name="Q5" />Uw account is geblokkeerd. Neem contact op met de beheerder. <br />
</div>

Javascript

  $("input[name=A1]").click(function() 
  {
  if(this.id =="A1"){
    $("#Q3").show('slow');
  }
  else {
  $("#Q3").hide('slow');
  }
  });

Please also post your JavaScript code to show as what you have tried. — kalsowerus, Jul 04 '17 at 09:30
@shantaram_t I think the Q3 div should only be visible if both Q1 && Q2 are checked, take a look at my answer below :-) — Matthias Seifert, Jul 04 '17 at 09:54

score 1 · Answer 1 · answered Jul 04 '17 at 10:31

You can use a ternary instead of an if statement to make a little more elegant

/* get the status of the answers */
var status = $("#A1").is(':checked') && $("#A3").is(':checked');
/* let the status decide which $ method to use */
$("#Q3")[status ? 'fadeIn' : 'fadeOut'](500);

$("#helpdesk :input").change(function() {
  var status = $("#A1").is(':checked') && $("#A3").is(':checked');
  $("#Q3")[status ? 'fadeIn' : 'fadeOut'](500);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h2>Helpdesk</h2>
  <div>Wat is u probleem?</div>
</header>

<form id="helpdesk">

  <h4>Kunt computer normaal aanzetten?<span class="req" id="req_Q1">*</span></h4>
  <input type="radio" name="A1" id="A1" value="Ja" /> : Ja<br />
  <input type="radio" name="A1" id="A2" value="Nee" /> : Nee<br />

  <p class="instruct" id="instruct_Q1">
    <small>Controleer eerst de kabels!</small>
  </p>


  <h4 id="Q2">Geeft de monitor normaal beeld?<span class="req" id="req_Q2">*</span> </h4>
  <input type="radio" name="A2" id="A3" /> : Ja<br />
  <input type="radio" name="A2" id="A4" /> : Nee<br />

  <p class="instruct" id="instruct_Q2">
    <small>Controleer eerst de kabels!</small>
  </p>

  <div id="Q3" style="display: none;">
    <label for="Q3.1"><h4>Start windows normaal op?</h4></label>
    <select name="Q3.1">
    <option value="A3.1" >Ja, geen probleem</option>
    <option value="A3.2" >Ja, maar met foutmelding</option>
    <option value="A3.3" >Nee, zwart scherm</option>
    <option value="A3.4" >Nee, blauw scherm</option>
</select>
  </div>

  <div style="display: none;">
    <h4>Kunt u inloggen?</h4>
    <input type="radio" name="Q4" />Ja, geen probleem<br />
    <input type="radio" name="Q4" /> Nee, ik krijg een foutmelding<br />
  </div>

  <div style="display: none;">
    <h4>Ik krijg de volgende foutmelding <span class="req" id="req_Q5">*</span></h4>
    <input type="radio" name="Q5" />Kan u niet aanmelden bij het domein. Controleer of uw gebruikersnaam en/of toegangscode correct zijn.<br />
    <input type="radio" name="Q5" />Kan u niet aanmelden omdat het domein niet beschikbaar is. <br />
    <input type="radio" name="Q5" />Uw account is geblokkeerd. Neem contact op met de beheerder. <br />
  </div>

Luke_Nuke · Answer 2 · 2017-07-04T09:51:14.360

First of all to hide / unhide elements you should use the CSS. There was question about it on StackOverflow: JavaScript: How to Hide / Unhide <div>

However to my current knowledge to make IF statment - like you mentioned:

if(Q1 == Ja && Q2 == Ja){ show Q3 }

You need to use JavaScript.

EDIT: Hide/unhide div with button? I think there can be answer for your question: hide / unhide using JQuery - I found it preety quickly when asked google.

score 0 · Accepted Answer · answered Jul 04 '17 at 09:53

0

Look at this fiddle, and let me know, if it is the desired result :-) https://jsfiddle.net/7LL98L24/

$("#helpdesk :input").change(function() {
  if($("#A1").is(':checked') && $("#A3").is(':checked')) {
    $("#Q3").fadeIn(500);
  } else {
    $("#Q3").fadeOut(500);
  }
});

Please notice, that I added an ID to your form Element to use the .change Method of jQuery

answered Jul 04 '17 at 09:53

Matthias Seifert

2,033
3
29
41

1

Yess great thnx @Matthias S. – Ronnie Jul 04 '17 at 09:58

hide-unhide with radio button

3 Answers3