在不同的单选按钮值上显示额外的字段答案

【问题标题】：show extra fields on different radio button values在不同的单选按钮值上显示额外的字段
【发布时间】：2017-03-12 17:51:03
【问题描述】：

我有三个单选按钮，当访问者单击第一个单选按钮时，什么都不会发生，当他们单击第二个或第三个单选按钮时，应该会显示一些额外的字段。

我有以下 html：

<p class="input-group input-radio input-field-workshop_wenst_u_een_factuur"
  <label for="workshop_wenst_u_een_factuur">
    Wenst u een factuur?
    <span class="em-form-required">*</span>
  </label>
  <span class="input-group">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" val="Ik heb geen factuur nodig." type="radio">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" val="Ik heb wel een factuur nodig." type="radio">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" val="Mijn werkgever zal betalen." type="radio">
  </span>
</p>

额外字段的 CSS：

.input-field-workshop_gelijk_adres, .input-field-factuur_bedrijf, 
.input-field-factuur_naam_contactpersoon, .input-field-factuur_email_contactpersoon,
.input-field-factuur_straat, .input-field-factuur_nummer, 
.input-field-factuur_bus, .input-field-factuur_postcode,
.input-field-factuur_gemeente, .input-field-factuur_land,
.input-field-factuur_btw-nummer, .input-field-factuur_opmerkingen {
  display: none;
}

我希望在选择单选按钮 2 或 3 时显示额外字段。我有以下脚本：

$("input[name='workshop_wenst_u_een_factuur']").click(function () {
  $('.input-field-workshop_gelijk_adres').css('display', ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none'),
  $('.input-field-factuur_bedrijf').css('display', ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none'),
  $('.input-field-factuur_naam_contactpersoon').css('display', ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none'),
  $('.input-field-factuur_email_contactpersoon').css('display', ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none'),
  $('.input-field-factuur_straat').css('display', ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none'),
  $('.input-field-factuur_nummer').css('display', ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none'),
  $('.input-field-factuur_bus').css('display', ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none'),
  $('.input-field-factuur_postcode').css('display', ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none'),
  $('.input-field-factuur_gemeente').css('display', ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none'),
  $('.input-field-factuur_land').css('display', ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none'),
  $('.input-field-factuur_btw-nummer').css('display', ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none'),
  $('.input-field-factuur_opmerkingen').css('display', ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none');
})

这在我选择第二个单选按钮时起作用，如何在选择第三个单选按钮时使其可见，然后在再次选择第一个单选按钮时再次消失？

【问题讨论】：

标签： javascript css radio-button

【解决方案1】：

对现有代码的最简单更改是测试单击项的值是否等于第一个单选按钮的值，如果是则隐藏字段，否则显示它们。

也就是说，改变这个：

$('.input-field-workshop_gelijk_adres').css('display',
           ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none'),
// and the others

...到这个：

$('.input-field-workshop_gelijk_adres').css('display',
           ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'),
// and the others

但是，如果您通过一次选择所有相关字段来在一行中完成所有操作会简单得多，并注意它对于 jQuery 选择器（如 CSS 选择器）列出多个类是有效的：

$("input[name='workshop_wenst_u_een_factuur']").click(function () {

  $('.input-field-workshop_gelijk_adres, .input-field-factuur_bedrijf, .input-field-factuur_naam_contactpersoon, .input-field-factuur_email_contactpersoon, .input-field-factuur_straat, .input-field-factuur_nummer, .input-field-factuur_bus, .input-field-factuur_postcode, .input-field-factuur_gemeente, .input-field-factuur_land, .input-field-factuur_btw-nummer, .input-field-factuur_opmerkingen')
    .css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block');

});

.input-field-workshop_gelijk_adres, .other-classes-here { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="input-group input-radio input-field-workshop_wenst_u_een_factuur"
  <label for="workshop_wenst_u_een_factuur">
    Wenst u een factuur?
    <span class="em-form-required">*</span>
  </label>
  <span class="input-group">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Ik heb geen factuur nodig." type="radio">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Ik heb wel een factuur nodig." type="radio">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Mijn werkgever zal betalen." type="radio">
  </span>
</p>
<div class="input-field-workshop_gelijk_adres">Sample "field"</div>

话虽如此，如果你给所有这些相关的字段一个公共类，然后在你的 JS 中引用那个类，维护起来会容易得多：

$('.common-class-name-here')
    .css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block');

如果您想让隐藏和显示更漂亮，可以使用.slideDown() 和.slideUp() 方法，而不是使用.css() 手动设置display 属性：

$('.input-field-whatever...')
    [this.value === 'Ik heb geen factuur nodig.' ? 'slideUp':'slideDown']();

展开并运行以下命令以在上下文中查看：

$("input[name='workshop_wenst_u_een_factuur']").click(function () {

  $('.input-field-workshop_gelijk_adres, .input-field-factuur_bedrijf, .input-field-factuur_naam_contactpersoon, .input-field-factuur_email_contactpersoon, .input-field-factuur_straat, .input-field-factuur_nummer, .input-field-factuur_bus, .input-field-factuur_postcode, .input-field-factuur_gemeente, .input-field-factuur_land, .input-field-factuur_btw-nummer, .input-field-factuur_opmerkingen')
    [this.value === 'Ik heb geen factuur nodig.' ? 'slideUp':'slideDown']();

});

.input-field-workshop_gelijk_adres, .other-classes-here { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="input-group input-radio input-field-workshop_wenst_u_een_factuur"
  <label for="workshop_wenst_u_een_factuur">
    Wenst u een factuur?
    <span class="em-form-required">*</span>
  </label>
  <span class="input-group">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Ik heb geen factuur nodig." type="radio">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Ik heb wel een factuur nodig." type="radio">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Mijn werkgever zal betalen." type="radio">
  </span>
</p>
<div class="input-field-workshop_gelijk_adres">Sample "field"</div>

（注意：在您的 HTML 中，val="..." 应该是 value="..."。）

【讨论】：