显示/隐藏 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 () {

    $('#inlineCheckbox2').change(function () {

        if (!this.checked)

           $('#hidden').fadeOut('slow');

        else 

            $('#hidden').fadeIn('slow');

    });

});

#hidden{

  display:none

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

参考：https://stackoverflow.com/a/19447642/10971575

Answer 2

let valeInpOne = document.getElementById('inlineCheckbox1'); 

let valeInpTwo = document.getElementById('inlineCheckbox2').value; 

let ele = document.getElementById("hidden");

if(valeInpOne == 'option1'){ ele.hidden = true }else if(valeInpTwo == 'option2'){ ele.hidden = false }