簡體   English   中英

根據使用javascript選擇的默認單選按鈕顯示Div

[英]Show Div based on default radio button selected using javascript

我有一個基於兩個單選按鈕的表單。 如果頁面加載時選擇了一個單選按鈕,我想顯示DIV。 如果在表單上保存了“是”值,那么在每頁加載中都應顯示DIV。 如果窗體上沒有保存任何值,則DIV應該不可見。

PS我僅使用Javascript實現了DIV顯示和隱藏單選按鈕選擇上的功能。

這是我的代碼:-頁面的第一部分。

                    <script>
                    function yesnoinsCheck() {
                        if (document.getElementById('yesinsCheck').checked) {
                            document.getElementById('showexplain').style.display = 'block';
                            style.opacity = 0;
                            setTimeout(fade, 40);
                        }
                        else document.getElementById('showexplain').style.display = 'none';
                        style.opacity = 1;
                        setTimeout(fade, 40);
                    }

                </script>

<tr>
                        <td>
                            <input type="radio" class="had-insurance" onchange="javascript:yesnoinsCheck();" id="yesinsCheck" name="125" value="1" <?php if($detail_trailer['had_insurance_'] == '1') echo 'checked'?> checked=""><span class="radio-text">Yes</span>
                            <input type="radio" class="had-insurance" onchange="javascript:yesnoinsCheck();" id="noinsCheck" name="125" value="2" <?php if($detail_trailer['had_insurance_'] == '2') echo 'checked'?>><span class="radio-text">No</span>
                        </td> 
                    </tr>


                     <tr id="showexplain" style="display: none;"></tr>

頁面的部分:-

<script type="text/javascript">

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('boxphysical').style.display = 'block';
    }
    else document.getElementById('boxphysical').style.display = 'none';

}
</script>

<td>
                            <input type="radio" class="physical-damage" onclick="javascript:yesnoCheck();" id="yesCheck" name="120" value="1" <?php if($detail_trailer['physical_damage_insurance'] == '1') echo 'checked'?> checked=""><span class="radio-text">Yes</span>
                            <input type="radio" class="physical-damage" onclick="javascript:yesnoCheck();" id="noCheck" name="120" value="2" <?php if($detail_trailer['physical_damage_insurance'] == '2') echo 'checked'?>><span class="radio-text">No</span>
                        </td> 
  <tr id="boxphysical" style="display:none;" ></tr>

嘗試這樣的事情: 編輯

       <script>
      function atLoadTime(){
      if (document.getElementById('yesinsCheck').checked) {
          document.getElementById('showexplain').style.display = 'block';
      }

      if (document.getElementById('yesCheck').checked) {
          document.getElementById('boxphysical').style.display = 'block';
      }
      }
                    function yesnoinsCheck() {
                        if (document.getElementById('yesinsCheck').checked) {
                            document.getElementById('showexplain').style.display = 'block';
                           // style.opacity = 0;
                            //setTimeout(fade, 40);
                        }
                        else document.getElementById('showexplain').style.display = 'none';
                       // style.opacity = 1;
                        //setTimeout(fade, 40);
                    }


                    function yesnoCheck() {
                        if (document.getElementById('yesCheck').checked) {
                            document.getElementById('boxphysical').style.display = 'block';
                           // style.opacity = 0;
                            //setTimeout(fade, 40);
                        }
                        else document.getElementById('boxphysical').style.display = 'none';
                       // style.opacity = 1;
                        //setTimeout(fade, 40);
                    }

                </script>
<body onload="javascript:atLoadTime();">


                            <input type="radio" class="had-insurance" onchange="javascript:yesnoinsCheck();" id="yesinsCheck" name="125" value="1" <?php if($detail_trailer['had_insurance_'] == '1')echo 'checked'?> ><span class="radio-text">Yes</span>
                            <input type="radio" class="had-insurance" onchange="javascript:yesnoinsCheck();" id="noinsCheck" name="125" value="2" <?php if($detail_trailer['had_insurance_'] == '2') echo 'checked'?>><span class="radio-text">No</span>
                        <input type="radio" class="physical-damage" onclick="javascript:yesnoCheck();" id="yesCheck" name="120" value="1" <?php if($detail_trailer['physical_damage_insurance'] == '1') echo 'checked'?>><span class="radio-text">Yes</span>
                            <input type="radio" class="physical-damage" onclick="javascript:yesnoCheck();" id="noCheck" name="120" value="2" <?php if($detail_trailer['physical_damage_insurance'] == '2') echo 'checked'?>><span class="radio-text">No</span>



                     <div id="showexplain" style="display: none;">hello there</div>

                      <div id="boxphysical" style="display: none;">second div............</div>
                     </body>

這應該可以解決您的問題。如果您使用的是第一個create table標簽。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM