根據選中的單選按鈕顯示/隱藏划分：

Question

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

帳戶：

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

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

這樣做的“正確”方法

1. 使用表格
2. 如果您使用的是表單，您可以按名稱訪問表單中的每個條目，而無需為它們分配 id：這對單選類型更有用，因為您可以直接使用它們選擇的值
3. 使用 CSS class inheritance 和其他可能性，喜歡這里的鄰居

 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>