我如何 select 单选按钮加载并解析值

How do I select a radio button onload AND parse the value

我已经成功地弄清楚了如何在加载时选择单选按钮,但我还没有弄清楚如何在不单击单选按钮的情况下显示该按钮的值。我正在尝试 show/hide 各种 div,但我希望第一个 div 在页面加载时显示,而不是什么都不显示。感谢您的帮助。

    <script>
      window.onload = function() {
        document.myForm.options[0].checked = true;
      }
    </script> 


<style>
    .box{
        padding: 0px;
        display: none;
        margin-top: 0px;
    }


[type='radio'] {
margin-left:50px;
margin-right:5px;
}
</style>


<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">


$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="first"){
            $(".box").not(".first").hide();
            $(".first").show();
        }
        if($(this).attr("value")=="second"){
            $(".box").not(".second").hide();
            $(".second").show();
        }
        if($(this).attr("value")=="third"){
            $(".box").not(".third").hide();
            $(".third").show();
        }

    });
});
</script>



<form name="myForm">
<input type="radio" value="first" id="maina" name="options">SHOW FIRST
<input type="radio" value="second" id="maina" name="options">SHOW SECOND
<input type="radio" value="third" id="maina" name="options">SHOW THIRD
</form>




<div class="first box">
first div
</div>



<div class="second box">
second div
</div>



<div class="third box">
third div
</div>

为什么不直接明确告诉第一个框显示,而不考虑其他框的设置?

.first {
  display:block;
}