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

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> 

话虽如此，如果您为所有相关字段提供一个通用类，然后在JS中引用该类，则维护起来会容易得多：

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

如果要隐藏和显示一些.slideDown()东西，可以使用.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="..." 。）