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

Question

伙计们，这与互联网上的答案略有不同。这里我有 3 个单选按钮和 2 个主要隐藏的部分。一个分区(例如 div1)用于一个单选按钮(例如 Radio1)，另一个分区(例如 div2)用于其他两个单选按钮(例如 Radio2 和 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';
}
}

在上述情况下，Radio 1 和 Radio 3 按钮工作正常。但是当我单击 Radio 2 按钮时，所需的 division2 不会出现。任何人都可以帮助这是什么小问题。

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 时执行的最终代码。