Show/hide 根据选中的单选按钮划分：

Question

我正在尝试 show/hide 根据选中的单选按钮进行划分。虽然它在货币功能中起作用，但我正在尝试在它不适用的帐户中使用。任何 help/suggestions 都将不胜感激，因为我被困了很长一段时间。下面是我的代码：

帐号：

    <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); 如果(!(/[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>

Answer 1

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

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

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

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

将每个收音机的标签放在 <label> 元素中也是一个好习惯。

下面的工作片段：

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>

Answer 2

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

使用表格
如果您使用的是表单，您可以通过名称访问表单中的每个条目，并且不需要为它们分配 ID：这对无线电类型更有用，因为您可以直接使用它们所选值
使用CSSclass继承等多种可能，喜欢这里的邻居

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>

Show/hide 根据选中的单选按钮划分：

Show/hide division based on the checked radio button:

html

javascript

css

division

radio