如何使用多个收音机隐藏/显示jQuery中的内容

编程问答 2022-08-11

问题描述

我有几个无线电设备和无线电时与被选择的值“真”，它表明shoudl低于它一个div。如果为“ false”，则应将其下面的div隐藏。 这是我到目前为止所拥有的：

如果为TRUE，则显示输入字段。如果为假，则隐藏输入字段

我的小提琴：https://jsfiddle.net/dr81jxa7/24/

默认情况下，应选中所有带有“ True”的广播，但它不起作用。 点击功能也不会隐藏/显示下面的输入字段。

我如何使其正常工作？

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>

解决方法

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

我包裹在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>

hidejqueryradioshow