Javascriptを表示する一般的な2つのラジオボタンのDiv部

Question

これは人の回答がインターネットの回答と少し異なります。ここに私は主に隠されている3つのラジオボタンと2つの部門があります。 1つのディビジョン（div1）は1つのラジオボタン（Ra​​dio1）用で、別のディビジョン（div2）は他の2つのラジオボタン（例えばRadio2 &ラジオ3）のものです。

以下は私のHTMLコードです。以下は

<div class="form-group"> 
    <label class="radio-inline"> 
     <input type="radio" onclick="javascript:radioCheck();" name="optionsRadiosInline" id="directradio" value="option1">Direct 
    </label> 

    <label class="radio-inline"> 
     <input type="radio" onclick="javascript:radioCheck();" name="optionsRadiosInline" id="chequeradio" value="option2">Cheque 
     </label> 

     <label class="radio-inline"> 
     <input type="radio" onclick="javascript:radioCheck();" name="optionsRadiosInline" id="cashradio" value="option3">Cash 
     </label> 
</div> 

ディビジョン1

<div class="col-md-12" id="showbank" style="display:none;"> 
    <div class="form-group"> 
     <label class="col-sm-4 control-label">Comment </label> 
       <div class="col-sm-6"> 
        <textarea type="text" rows="3" class="form-control" name="comment" id="comment"></textarea> 
       </div> 
    </div> 
</div> 

ディビジョン2

<div class="col-md-12" id="showcashbox" style="display:none;"> 
    <div class="form-group"> 
     <label class="col-sm-4 control-label">Comment </label> 
       <div class="col-sm-6"> 
        <textarea type="text" rows="3" class="form-control" name="comment" id="comment"></textarea> 
       </div> 
    </div> 
</div> 

---

JavaScriptのコード。

function radioCheck() { 
if (document.getElementById('directradio').checked) { 
    document.getElementById('showbank').style.display = 'block'; 
} 
else { 
    document.getElementById('showbank').style.display = 'none'; 
} 

if (document.getElementById('chequeradio').checked) { 
    document.getElementById('showcashbox').style.display = 'block'; 
} 
else { 
    document.getElementById('showcashbox').style.display = 'none'; 
} 

if (document.getElementById('cashradio').checked) { 
    document.getElementById('showcashbox').style.display = 'block'; 
} 
else { 
    document.getElementById('showcashbox').style.display = 'none'; 
} 
} 

上記の場合、ラジオ1とラジオ3のボタンが正常に動作しています。しかし、ラジオ2ボタンをクリックすると、必要な分割2は出てこない。誰もがこれの小さな問題は何かを助けることができます。

Answer 1

次のコードを試してください。

2つの異なる条件で同じ要素の表示を変更しようとすると、else ifを使用する必要があります。 3度目のクリックでは、3度目のelseには行かなかったので、あなたのコードに従ってうまくいきました。

2番目のボタンをクリックすると、2番目のifと3番目のelseにも行きましたので、ボックスは表示されませんでした。

function radioCheck() { 
 
if (document.getElementById('directradio').checked) { 
 
    document.getElementById('showbank').style.display = 'block'; 
 
} 
 
else { 
 
    document.getElementById('showbank').style.display = 'none'; 
 
} 
 

 
if (document.getElementById('chequeradio').checked) { 
 
    document.getElementById('showcashbox').style.display = 'block'; 
 
} 
 

 
else if (document.getElementById('cashradio').checked) { 
 
    document.getElementById('showcashbox').style.display = 'block'; 
 
} 
 
else { 
 
    document.getElementById('showcashbox').style.display = 'none'; 
 
} 
 
}

<div class="form-group"> 
 
    <label class="radio-inline"> 
 
     <input type="radio" onclick="javascript:radioCheck();" name="optionsRadiosInline" id="directradio" value="option1">Direct 
 
    </label> 
 

 
    <label class="radio-inline"> 
 
     <input type="radio" onclick="javascript:radioCheck();" name="optionsRadiosInline" id="chequeradio" value="option2">Cheque 
 
     </label> 
 

 
     <label class="radio-inline"> 
 
     <input type="radio" onclick="javascript:radioCheck();" name="optionsRadiosInline" id="cashradio" value="option3">Cash 
 
     </label> 
 
</div> 
 

 
<div class="col-md-12" id="showbank" style="display:none;"> 
 
    <div class="form-group"> 
 
     <label class="col-sm-4 control-label">Comment </label> 
 
       <div class="col-sm-6"> 
 
        <textarea type="text" rows="3" class="form-control" name="comment" id="comment"></textarea> 
 
       </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-md-12" id="showcashbox" style="display:none;"> 
 
    <div class="form-group"> 
 
     <label class="col-sm-4 control-label">Comment </label> 
 
       <div class="col-sm-6"> 
 
        <textarea type="text" rows="3" class="form-control" name="comment" id="comment"></textarea> 
 
       </div> 
 
    </div> 
 
</div>

これはあなたを助けることを願っています。

Answer 2

第二のdivは、2つのチェックボックスのいずれかのために表示する場合は、あなたがそのような条件のチェックを結合する必要があります。

function radioCheck() 
{ 
    if (document.getElementById('directradio').checked) { 
     document.getElementById('showbank').style.display = 'block'; 
    } 
    else { 
     document.getElementById('showbank').style.display = 'none'; 
    } 

    if (document.getElementById('chequeradio').checked || document.getElementById('cashradio').checked) { 
     document.getElementById('showcashbox').style.display = 'block'; 
    } 
    else { 
     document.getElementById('showcashbox').style.display = 'none'; 
    } 
} 

私たちはあなたのコードを実行した場合、それはdiv要素が表示されます3番目のチェックボックスがクリックされた場合にのみ、3番目のチェックボックスのelse部分が2番目のdivで実行される最終コードである場合にのみクリックします。