CODEWITHSUNDEEP
jqueryradio-buttontoggle
john
john

Reputation: 1273

How to hide/show content in jquery with multiple radios

I have a couple of radios and when radio with value "true" is selected, it shoudl show a div below of it. when "false", it should hide the div below of it. This is what i have so far:

If TRUE, show input field. If FALSE, hide input field

My fiddle: https://jsfiddle.net/dr81jxa7/24/

All the radio's with "True" should default be checked but it does not work. And the click function also does not hide/show the input field below.

How can I make this work properly?

if ($('.notify-email-false').is(':checked')) {
  $('.notify-email-input').hide();
}

$('.notify-email').click(function() {
  var inputValue = $(this).attr("value");
  if (inputValue == 'true') {
    $(this).closest('.notify-email-input').show('slow');
  } else {
    $(this).closest('.notify-email-input').hide('slow');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="notify-email" type="radio" name="notify_email" value="true" checked />True
<input class="notify-email notify-email-false" type="radio" name="notify_email" value="false" />False
<div class="notify-email-input">
  Email: <br />
  <input type="email" name="blog_email" value="Email 1" placeholder="EMAIL" />
</div>

<br /><br />

<input class="notify-email" type="radio" name="notify_email" value="true" checked />True
<input class="notify-email notify-email-false" type="radio" name="notify_email" value="false" />False
<div class="notify-email-input">
  Email: <br />
  <input type="email" name="blog_email" value="Email 2" placeholder="EMAIL" />
</div>

<br /><br />

<input class="notify-email" type="radio" name="notify_email" value="true" checked />True
<input class="notify-email notify-email-false" type="radio" name="notify_email" value="false" />False
<div class="notify-email-input">
  Email: <br />
  <input type="email" name="blog_email" value="Email 3" placeholder="EMAIL" />
</div>

Upvotes: 0

Views: 30

Answers (1)

mplungjan
mplungjan

Reputation: 178375

Why not use toggle. The duration is not needed for such short input

I wrapped in divs to use closest proper

I also had to give the radios different names per set

$('.notify-email:checked').each(function() {
  $(this).closest("div").find(".notify-email-input").toggle(this.value === "true");
})

$('.notify-email').on("click", function() {
  $(this).closest("div").find(".notify-email-input").toggle(this.value === "true");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input class="notify-email" type="radio" name="notify_email1" value="true" checked />True
  <input class="notify-email" type="radio" name="notify_email1" value="false" />False
  <div class="notify-email-input">
    Email: <br />
    <input type="email" name="blog_email" value="Email 1" placeholder="EMAIL" />
  </div>
</div>
<div>
  <input class="notify-email" type="radio" name="notify_email2" value="true"  />True
  <input class="notify-email" type="radio" name="notify_email2" value="false" checked />False
  <div class="notify-email-input">
    Email: <br />
    <input type="email" name="blog_email" value="Email 2" placeholder="EMAIL" />
  </div>
</div>
<div>
  <input class="notify-email" type="radio" name="notify_email3" value="true" checked />True
  <input class="notify-email" type="radio" name="notify_email3" value="false" />False
  <div class="notify-email-input">
    Email: <br />
    <input type="email" name="blog_email" value="Email 3" placeholder="EMAIL" />
  </div>
</div>

Upvotes: 1

Related Questions