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

Issue

I've successfully figured out how to have a radio button selected upon load, but I've yet to figure out how to make the value for that button appear without having to click on the radio button. I'm attempting to show/hide various divs, but I'd like for the first div to show as the page loads rather than nothing at all. Thanks for any help.

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

Solution

Why not just explicitly tell the first box to show, regardless of the other box settings?

.first {
  display:block;
}

Answered By - Paul L