如何使用多个收音机 hide/show jquery 中的内容

Question

I have a couple of radios and when radio with value "true" is selected, it shoudl show a div below of it.当“false”时，它应该隐藏它下面的 div。这是我目前所拥有的：

如果为真，则显示输入字段。如果为 FALSE，则隐藏输入字段

我的fiddle：https://jsfiddle.net/dr81jxa7/24/

默认情况下应选中所有带有“True”的收音机，但它不起作用。而且点击功能也不hide/show下面的输入框

我怎样才能让它正常工作？

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>

Answer 1

为什么不使用切换。如此短的输入不需要持续时间

我包裹在 div 中以使用最接近的属性

我还必须给每台收音机起不同的名字

$('.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>

如何使用多个收音机 hide/show jquery 中的内容

How to hide/show content in jquery with multiple radios

jquery

show

hide

radio