Javascript显示隐藏两个单选按钮的公共Div

Question

Guys this is little different from what answers are in internet. Here I have 3 radio button and 2 division which are primarily hidden. One division (say div1) is for one radio button (say Radio1) and another division (say div2) is for other two radio button (say Radio2 & Radio3).

Below is my HTML code.

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

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

Division 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 Code Below.

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';
}
}

In the above case Radio 1 and Radio 3 button is working fine. But when I click Radio 2 button the required division2 is not coming. Can anyone help what is the minor problem in this.

Answer 1

If the second div is to be displayed for either of the two check boxes, then you need to combine the condition check like so:

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';
    }
}

If we execute your code, it will show the the div only if the third checkbox is clicked, if its not the else part of the third checkbox is the final code that gets executed on second div click as well.

Answer 2

Try the following code.

You need to use else if as you are trying to change display of same element for 2 different conditions. When you are clicking on third it was fine as per your code, because it was not going to the else of the third condition.

When you were clicking on the second one, it was going to the second if and 3rd else as well, so box was not coming.

 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> 

Hope this will help you.