根据使用 javascript 选择的默认单选按钮显示 Div答案

【问题标题】：Show Div based on default radio button selected using javascript根据使用 javascript 选择的默认单选按钮显示 Div
【发布时间】：2014-11-14 10:01:32
【问题描述】：

我有一个基于两个单选按钮的表单。如果在页面加载时选择了一个单选按钮，我想显示一个 DIV。如果值“YES”保存在表单上，则在每个页面加载时都应显示 DIV。如果表单上没有保存任何值，则 DIV 不应该是可见的。

附：我仅使用 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>

section 页面部分：-

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

【问题讨论】：

标签： javascript

【解决方案1】：

试试这样的：EDITED

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

这应该可以解决您的问题。如果您使用的是第一个创建表标签。

【讨论】：

是的，它工作正常，但还有一个问题，我有两组不同的单选选项部分。所以它适用于一个部分，而不是同一页面上的其他部分。
将这些单选按钮也添加到您的问题中。
对不起，我是堆栈流中的新手，我把代码放在错误的地方
我对所有文件都有一个标题，所以如果在正文中不调用 onload 会很好。
我已经更新了答案。你可以自己完成这个添加。任何方式都没有问题。