JavaScript Show hide hide common Div用于两个广播按钮

Question

伙计们这与互联网中的答案没有什么不同。在这里，我有3个广播按钮和2个部门，主要是隐藏的。一个部门（例如Div1）是一个无线电按钮（例如Radio1），另一个部门（例如Div2）用于其他两个广播按钮（例如Radio2＆amp; Radio3）。

下面是我的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按钮时，所需的distriv 2不会到来。任何人都可以帮助其中的小问题。

Answer 1

如果要为两个复选框中的任何一个显示第二个DIV，则需要将条件检查组合起来：

：

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，如果它不是第三个复选框的其他部分，则是在第二次Div上执行的最终代码。

Answer 2

尝试以下代码。

在尝试在2个不同条件下更改相同元素的显示时，您需要使用else if。当您单击第三次时，按照您的代码很好，因为它不会进入第三条件的其他条件。

当您单击第二个时，它将进入第二个IF和其他第三个，因此盒子不会到来。

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>

希望这对您有帮助。