JavaScript 显示/隐藏 DIV [重复]

Posted 2023-05-07

【中文标题】JavaScript 显示/隐藏 DIV [重复]

【英文标题】：JavaScript Show/Hide DIV [duplicate]

【发布时间】：2020-05-25 11:47:33

【问题描述】：

我有一个表单，用户可以选择他/她是SINGLE CITIZENSHIP OR DUAL CITIZENSHIP。 如果用户选择SINGLE CITIZENSHIP，隐藏div将不显示，如果用户选择DUAL CITIZENSHIP，隐藏div将显示在下方。

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

【问题讨论】：

请尽量减少...

无法在您的 html 中看到 SINGLE CITIZENSHIP，请也发布您的代码工作（在问题本身中）。

这能回答你的问题吗？ Show/hide 'div' using javascript

对不起。如果用户使用 FILIPINO 菲律宾人

或许你可以试试<?php if(condition): ?> here <?php endif; ?>

【参考方案1】：

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 

【参考方案2】：

使用jQuery 的change() 事件并显示-隐藏 div。

$(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://***.com/a/19447642/10971575

【讨论】：

@kiinken 如果有人点击Dual Citizenship，然后点击single citizenship，会发生什么？此代码不起作用

@kiinken 检查这个：- jsfiddle.net/e1yLopjz/1（点击第二个复选框，然后点击第一个复选框）