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

Question

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

我有以下 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');
})

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

Answer 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>

话虽如此，如果您为所有这些相关字段提供一个公共(public)类，然后只在您的 JS 中引用该类，那么维护起来会容易得多:

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

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

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

(注意:在您有 val="..." 的 HTML 中，它应该是 value="..."。)