根据选中的单选按钮显示/隐藏划分：答案

【问题标题】：Show/hide division based on the checked radio button:根据选中的单选按钮显示/隐藏划分：
【发布时间】：2021-12-27 23:28:20
【问题描述】：

我正在尝试根据选中的单选按钮显示/隐藏分区。尽管它在货币功能中起作用，但我正在尝试在帐户中不起作用。任何帮助/建议将不胜感激，因为我被困了很长一段时间。以下是我的代码：

帐户：

    <script type="text/javascript">

        function account() {
           if (document.getElementByID('ccheck').checked) {
                document.getElementByID('ifc').style.display = 'block';
            }
            else document.getElementByID('ifc').style.display = 'none';
            if (document.getElementByID('ocheck').checked) {
                document.getElementByID('ifo').style.display = 'block';
            }
            else document.getElementByID('ifo').style.display = 'none';
            if (documen.getElementByID('bothcheck').checked) 
            {document.getElementsByID('ifc','ifo').style.display='block';
        } 
            else document.getElementsByID('ifo','ifc').style.display= 'none'}
        

        </script> 

C-61<input type="radio" name="Account" id="ccheck" onclick="javascript:account();">
O-51<input type="radio" name="Account" id="ocheck" onclick="javascript:account();">
Both <input type="radio" name="Account" id="bothcheck" onclick="javascript:account();">

</div>
<br><br>
<div id="ifc" style="display:none">
<label class="Appcap"> Approved C in Local Currency and USD:</label>
<br><br>
<label class="LC"> C Amount in Local Currency:</label>
<br>
<script type="text/javascript">

    function currencies() {
        if (document.getElementById('EUROCheck').checked) {
            document.getElementById('ifEURO').style.display = 'block';
        }
        else document.getElementById('ifEURO').style.display = 'none';
        if (document.getElementById('GBPCheck').checked) {
            document.getElementById('ifGBP').style.display = 'block';
        }
        else document.getElementById('ifGBP').style.display = 'none';
    }
    </script>

EUR <input type="radio" onclick="javascript:currencies();" name="currency" id="EUROCheck">
<br>
GBP <input type="radio" onclick="javascript:currencies();" name="currency" id="GBPCheck"><br>
    <div id="ifEURO" style="display:none">
        EUR <input type='number' min=0.00 max=999999999.00 step=0.01 id='EURO' name='EURO'onkeypress="isInputNumber(event)"><br>
    </div>
    <div id="ifGBP" style="display:none">
        GBP <input type='number' min=0.00 max=999999999.00 step=0.01 id='GBP' name='GBP' onkeypress="isInputNumber(event)"><br>
    </div>
    <br>
 <label for="Amount in USD"> Amount in USD:</label>
    <br>
   USD <input type="number" min=0.00 max=0.00 step="0.01" id="USD" onkeypress="isInputNumber(event)">
</div>
<br><br>

<div id="ifo" style="display: none">

<label class="Appop"> Approved O in Local Currency and USD:</label>
<br><br>
<label class="LCO"> O Amount in Local Currency:</label>
<br>
<script type="text/javascript">


    function currenciesop() {
        if (document.getElementById('EUROCheckOP').checked) {
            document.getElementById('ifEUROOP').style.display = 'block';
        }
        else document.getElementById('ifEUROOP').style.display = 'none';
        if (document.getElementById('GBPCheckOP').checked) {
            document.getElementById('ifGBPOP').style.display = 'block';
        }
        else document.getElementById('ifGBPOP').style.display = 'none';
    }
    </script>

函数 isInputNumber(evt){ var ch = String.fromCharCode(evt.which); if(!(/[0-9]/.test(ch))){ evt.preventDefault(); } }

    EUR <input type="radio" onclick="javascript:currenciesop();" name="currency" id="EUROCheckOP">
    <br>
    GBP <input type="radio" onclick="javascript:currenciesop();" name="currency" id="GBPCheckOP"><br>
        <div id="ifEUROOP" style="display:none">
            EUR <input type='number' min=0.00 max=999999999.00 step=0.01 id='EUROOP' name='EURO'onkeypress="isInputNumber(event)"><br>
        </div>
        <div id="ifGBPOP" style="display:none">
            GBP <input type='number' min=0.00 max=999999999.00 step=0.01 id='GBPOP' name='GBP' onkeypress="isInputNumber(event)"><br>
        </div>
        <br>
     <label for="Amount in USD OP"> Amount in USD:</label>
        <br>
       USD <input type="number" min=0.00 max=0.00 step="0.01" id="USDOP" onkeypress="isInputNumber(event)">
    </div>

【问题讨论】：

您需要记住，小写字母与大写字母不同。 document.getElementByID !== document.getElementById。也是Element，而不是Elements
谢谢！但是，它仍然不起作用：/如果您看到带有货币功能的第二部分，我使用相同的想法，但是它确实根据无线电检查显示/隐藏了 div。在帐户部分以某种方式运行代码时却没有。我放 Elements 的原因是在这部分我使用了两个 div。如果您对可能出现的问题有任何其他想法，我将不胜感激。
错字：<div class=account> => <div class="account">
谢谢你，但它仍然没有解决问题：/你有什么建议吗？ @MisterJojo
你为什么不先修复你的 HTML 和 JavaScript 语法？

标签： javascript html css division radio

【解决方案1】：

如 cmets 中所述，大小写很重要。此外，JS 中没有 getElementsById() 方法。您需要一次调用每个元素。

您可以使用querySelectorAll() 获取多个元素，然后使用.forEach() 迭代每个元素。唯一需要注意的是，您需要确保您使用的是 CSS 选择器。例如：

document.querySelectorAll('#ifc','#ifo').forEach( el => el.style.display='block');

没有显示的主要原因是您需要将else 放在bothcheck 上，因为如果您选中其他两个单选按钮之一，那么bothcheck 不会被选中，并且会隐藏这两个单选按钮div 元素。

在<label> 元素中包含每个无线电的标签也是一个好习惯。

在下面工作 sn-p：

function account() {

  if (document.getElementById('ccheck').checked) {
    document.getElementById('ifc').style.display = 'block';
  } else document.getElementById('ifc').style.display = 'none';
  if (document.getElementById('ocheck').checked) {
    document.getElementById('ifo').style.display = 'block';
  } else document.getElementById('ifo').style.display = 'none';
  if (document.getElementById('bothcheck').checked) {
    document.getElementById('ifc').style.display = 'block';
    document.getElementById('ifo').style.display = 'block';
  }
}


function currencies() {
  if (document.getElementById('EUROCheck').checked)
    document.getElementById('ifEURO').style.display = 'block';
  else document.getElementById('ifEURO').style.display = 'none';

  if (document.getElementById('GBPCheck').checked)
    document.getElementById('ifGBP').style.display = 'block';
  else document.getElementById('ifGBP').style.display = 'none';
}


function currenciesop() {
  if (document.getElementById('EUROCheckOP').checked)
    document.getElementById('ifEUROOP').style.display = 'block';
  else document.getElementById('ifEUROOP').style.display = 'none';

  if (document.getElementById('GBPCheckOP').checked)
    document.getElementById('ifGBPOP').style.display = 'block';
  else document.getElementById('ifGBPOP').style.display = 'none';
}


function isInputNumber(evt) {
  var ch = String.fromCharCode(evt.which);
  if (!(/[0-9]/.test(ch))) {
    evt.preventDefault();
  }

}

<label class="Account">Account:</label>
<div class=account>
  <label for=ccheck>C-61</label>
  <input type="radio" name="Account" id="ccheck" onclick="account()">
  <label for=ocheck>O-51</label>
  <input type="radio" name="Account" id="ocheck" onclick="account()">
  <label for=bothcheck>Both</label>
  <input type="radio" name="Account" id="bothcheck" onclick="account()">
</div>
<br><br>

<div id="ifc" style="display:none">
  <label class="Appcap"> Approved C in Local Currency and USD:</label>
  <br><br>
  <label class="LC"> C Amount in Local Currency:</label>
  <br> EUR <input type="radio" onclick="javascript:currencies();" name="currency" id="EUROCheck">
  <br> GBP <input type="radio" onclick="javascript:currencies();" name="currency" id="GBPCheck"><br>
  <div id="ifEURO" style="display:none">
    EUR <input type='number' min=0.00 max=999999999.00 step=0.01 id='EURO' name='EURO' onkeypress="isInputNumber(event)"><br>
  </div>
  <div id="ifGBP" style="display:none">
    GBP <input type='number' min=0.00 max=999999999.00 step=0.01 id='GBP' name='GBP' onkeypress="isInputNumber(event)"><br>
  </div>
  <br>
  <label for="Amount in USD"> Amount in USD:</label>
  <br> USD <input type="number" min=0.00 max=0.00 step="0.01" id="USD" onkeypress="isInputNumber(event)">
</div>
<br><br>

<div id="ifo" style="display: none">

  <label class="Appop"> Approved O in Local Currency and USD:</label>
  <br><br>
  <label class="LCO"> O Amount in Local Currency:</label>
  <br> EUR <input type="radio" onclick="javascript:currenciesop();" name="currency" id="EUROCheckOP">
  <br> GBP <input type="radio" onclick="javascript:currenciesop();" name="currency" id="GBPCheckOP"><br>
  <div id="ifEUROOP" style="display:none">
    EUR <input type='number' min=0.00 max=999999999.00 step=0.01 id='EUROOP' name='EURO' onkeypress="isInputNumber(event)"><br>
  </div>
  <div id="ifGBPOP" style="display:none">
    GBP <input type='number' min=0.00 max=999999999.00 step=0.01 id='GBPOP' name='GBP' onkeypress="isInputNumber(event)"><br>
  </div>
  <br>
  <label for="Amount in USD OP"> Amount in USD:</label>
  <br> USD <input type="number" min=0.00 max=0.00 step="0.01" id="USDOP" onkeypress="isInputNumber(event)">
</div>

【讨论】：

【解决方案2】：

做到这一点的“正确”方法

使用表格
如果您使用的是表单，您可以按名称访问表单中的每个条目，而无需为它们分配 id：这对于单选类型更有用，因为您可以直接使用它们的选定值
使用 CSS 类继承和其他可能性，比如这里的邻居

const 
  myForm    = document.forms['my-form']
, d_account = myForm.querySelector('div.account')
, d_ifc     =  myForm.querySelector('div#ifc')
, d_ifo     =  myForm.querySelector('div#ifo')
  ;
myForm.oninput =_=>
  {
  d_account.className = 'account' + myForm.Account.value
  d_ifc.className     =  myForm.ifc_currency.value
  d_ifo.className     =  myForm.ifo_currency.value
  }
function isInputNumber(evt)
  {
  let ch = String.fromCharCode(evt.which);
  if (!(/[0-9]/.test(ch)))  evt.preventDefault();
  }

div.account ~ div#ifc, 
div.account ~ div#ifo         { display: none; }
div.account.ccheck ~ div#ifc,
div.account.ocheck ~ div#ifo  { display: block; }

div#ifc > div#ifEURO,
div#ifc > div#ifGBP        { display: none; }
div#ifc.EUR > div#ifEURO,
div#ifc.GBP > div#ifGBP    { display: block; }

div#ifo > div#ifEUROOP,
div#ifo > div#ifGBPOP      { display: none; }
div#ifo.EUR > div#ifEUROOP,
div#ifo.GBP > div#ifGBPOP  { display: block; }

<form name="my-form">
  <label class="Account">Account:</label>
  <div class="account">
    <label> C-61 <input type="radio" name="Account" value=" ccheck" > </label> &nbsp;&nbsp;
    <label> O-51 <input type="radio" name="Account" value=" ocheck" > </label> &nbsp;&nbsp;
    <label> Both <input type="radio" name="Account" value=" ccheck ocheck"> </label>
  </div>
  <div id="ifc">
      <br><br>
    <label class="Appcap"> Approved C in Local Currency and USD:</label>
    <br><br>
    <label class="LC"> C Amount in Local Currency:</label>
      <br>
    <label>EUR <input type="radio" name="ifc_currency" value="EUR"> </label>  &nbsp;&nbsp;
    <label>GBP <input type="radio" name="ifc_currency" value="GBP"> </label> <br>

    <div id="ifEURO">
      EUR
      <input type='number' min=0.00 max=999999999.00 step=0.01 id='EURO' name='EURO' onkeypress="isInputNumber(event)"><br>
    </div>
    <div id="ifGBP">
      GBP
      <input type='number' min=0.00 max=999999999.00 step=0.01 id='GBP' name='GBP' onkeypress="isInputNumber(event)"><br>
    </div>
    <br>
    <label for="Amount in USD"> Amount in USD:</label>
    <br>
    USD
    <input type="number" min=0.00 max=0.00 step="0.01" id="USD" onkeypress="isInputNumber(event)">
  </div>

  <div id="ifo">
      <br><br>
    <label class="Appop"> Approved O in Local Currency and USD:</label>
      <br><br>
    <label class="LCO"> O Amount in Local Currency:</label>
      <br>
    <label>EUR <input type="radio"  name="ifo_currency" value="EUR"> </label> &nbsp;&nbsp;
    <label>GBP <input type="radio"  name="ifo_currency" value="GBP"> </label> <br>

    <div id="ifEUROOP">
      EUR
      <input type='number' min=0.00 max=999999999.00 step=0.01 id='EUROOP' name='EURO'
        onkeypress="isInputNumber(event)"><br>
    </div>
    <div id="ifGBPOP">
      GBP
      <input type='number' min=0.00 max=999999999.00 step=0.01 id='GBPOP' name='GBP'
        onkeypress="isInputNumber(event)"><br>
    </div>
    <br>
    <label for="Amount in USD OP"> Amount in USD:</label>
    <br>
    USD
    <input type="number" min=0.00 max=0.00 step="0.01" id="USDOP" onkeypress="isInputNumber(event)">
  </div>
</form>

【讨论】：