根據選中的單選按鈕顯示/隱藏磁區：-有解無憂

我正在嘗試根據選中的單選按鈕顯示/隱藏磁區。盡管它適用于貨幣功能，但我正在嘗試使用它不適用的帳戶。任何幫助/建議將不勝感激，因為我被困了很長一段時間。下面是我的代碼：

帳戶：

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

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

uj5u.com熱心網友回復：

正如評論中提到的，大小寫很重要。此外，getElementsById()JS 中沒有方法。您需要一次呼叫一個元素。

您可以使用 aquerySelectorAll()來獲取多個元素，然后使用.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>

uj5u.com熱心網友回復：

做到這一點的“正確”方法

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/358105.html

標籤：javascript html css 分配收音机

上一篇：如何在陣列中搜索一些文本并在javascript中獲取搜索到的陣列的索引

下一篇：如何將python字典傳遞給ac函式？