Question

我有一个使用JavaScript显示div的表单，具体取决于所选的单选按钮。现在以我的另一种形式进行更新，我应用了相同的java脚本，但在没有单击单选按钮的情况下直接显示div几乎没有做任何更改，但它没有用。如何正确地做到这一点。非常感谢任何帮助。

 <script type="text/javascript">
  function payment() {
    if (document.getElementById('installmentCheck').checked) {
      document.getElementById('installment').style.display = "block";
      document.getElementById('full').style.display = "none";
    }else if (document.getElementById('fullCheck').checked) {
      document.getElementById('full').style.display = "block";
      document.getElementById('installment').style.display = "none";
    }
  }
</script>


<div class="col-lg-6 ">
  <div class="form-group">
    <label class="control-label">
      Payment Scheme :
    </label>
    <div class="input-group ">
      <?php
      if ($scholarship->scholarship_payment != 'Full') {
        echo '<input type="radio" onclick="javascript:payment();" name="choosePaymentScheme" id="installmentCheck" value="Installment" checked > Installment &nbsp&nbsp&nbsp';
        echo '<input type="radio" onclick="javascript:payment();" name="choosePaymentScheme" id="fullCheck" value="Full"> Full';
      }else{
        echo '<input type="radio" onclick="javascript:payment();" name="choosePaymentScheme" id="installmentCheck" value="Installment" > Installment &nbsp&nbsp&nbsp';
        echo '<input type="radio" onclick="javascript:payment();" name="choosePaymentScheme" id="fullCheck" value="Full" checked> Full';
      }
      ?>
    </div>
  </div> 
  <div id="installment" style="display:none">
    <div class="form-group">
      <input type="text" name="Install" >
    </div>
  </div>
  <div id="full" style="display:none">
    <div class="form-group">
      <input type="text" name="full" >
    </div>
  </div>
</div>

Answer 1

如果我理解正确，您可以有条件地从底部display:none删除<div> CSS：

  <div id="installment" <?php if($scholarship->scholarship_payment == 'Full'){ echo 'style="display:none"' } ?>>
    <div class="form-group">
      <input type="text" name="Install" >
    </div>
  </div>
  <div id="full" <?php if($scholarship->scholarship_payment != 'Full'){ echo 'style="display:none"' } ?>>
    <div class="form-group">
      <input type="text" name="full" >
    </div>
  </div>

或者，也可以在一个框中切换id和name：

  <div id="<?php if($scholarship->scholarship_payment != 'Full'){ echo 'installment' } else { echo "full" } ?>">
    <div class="form-group">
      <input type="text" name="<?php if($scholarship->scholarship_payment != 'Full'){ echo 'Install' } else { echo "full" } ?>" >
    </div>
  </div>

显示Div而不单击更新表单中的单选按钮

1 个答案: