显示/隐藏 DIV

Question

我有一个表单，用户可以选择他/她是否是OR。

如果用户选择隐藏的将不会显示，如果用户选择隐藏的将显示在下面。SINGLE CITIZENSHIPDUAL CITIZENSHIPSINGLE CITIZENSHIPdivDUAL CITIZENSHIPdiv

<div class="form-row">

  <div class="form-check form-check-inline">

  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">

  <label class="form-check-label" for="inlineCheckbox1">Filipino</label>

</div>

<div class="form-check form-check-inline">

  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">

  <label class="form-check-label" for="inlineCheckbox2">Dual Citizenship</label>

</div>

</div>

<div id="hidden">

<div class="form-row">

  <div class="form-check form-check-inline">

  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">

  <label class="form-check-label" for="inlineCheckbox1">By birth</label>

</div>

<div class="form-check form-check-inline">

  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">

  <label class="form-check-label" for="inlineCheckbox2">By Naturalize</label>

</div>

</div>

</div>

Answer 1

使用事件和显示隐藏 div。change()jQuery$(document).ready(function () {&nbsp; &nbsp; $('#inlineCheckbox2').change(function () {&nbsp; &nbsp; &nbsp; &nbsp; if (!this.checked)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('#hidden').fadeOut('slow');&nbsp; &nbsp; &nbsp; &nbsp; else&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#hidden').fadeIn('slow');&nbsp; &nbsp; });});#hidden{&nbsp; display:none}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="form-row">&nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; class="form-check-input"&nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; id="inlineCheckbox1"&nbsp; &nbsp; &nbsp; value="option1"&nbsp; &nbsp; />&nbsp; &nbsp; <label class="form-check-label" for="inlineCheckbox1">Filipino</label>&nbsp; </div>&nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; class="form-check-input"&nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; id="inlineCheckbox2"&nbsp; &nbsp; &nbsp; value="option2"&nbsp; &nbsp; />&nbsp; &nbsp; <label class="form-check-label" for="inlineCheckbox2"&nbsp; &nbsp; &nbsp; >Dual Citizenship</label&nbsp; &nbsp; >&nbsp; </div></div><div id="hidden">&nbsp; <div class="form-row">&nbsp; &nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; class="form-check-input"&nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; id="inlineCheckbox1"&nbsp; &nbsp; &nbsp; &nbsp; value="option1"&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; <label class="form-check-label" for="inlineCheckbox1">By birth</label>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; class="form-check-input"&nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; id="inlineCheckbox2"&nbsp; &nbsp; &nbsp; &nbsp; value="option2"&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; <label class="form-check-label" for="inlineCheckbox2"&nbsp; &nbsp; &nbsp; &nbsp; >By Naturalize</label&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; </div>&nbsp; </div></div>参考：https://stackoverflow.com/a/19447642/10971575

Answer 2

let valeInpOne = document.getElementById('inlineCheckbox1');&nbsp;let valeInpTwo = document.getElementById('inlineCheckbox2').value;&nbsp;let ele = document.getElementById("hidden");if(valeInpOne == 'option1'){ ele.hidden = true }else if(valeInpTwo == 'option2'){ ele.hidden = false }