页面加载后，如何使第一个JS Option出现？

Question

I'm using the following script to toggle content or to allow content to appear and disappear upon the click of a radio button.

<script type="text/javascript">
function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}
</script>

If I don't use the following css then every option shows up until one is clicked.

.newboxes {
    display: none;
}

The HTML i use for the radio buttons is as follows:

<input style="vertical-align: middle; margin-top: 4px;" onclick="javascript:showonlyone('newboxes1');" type="radio" name="ProgramChoice" value="Lorem Ipsum" >

This is the information the above information will call to appear and disappear:

<div class="newboxes" id="newboxes1"> Lorem Ipsum </div>

I know that with my css it forces nothing to show upon page load, but without it it will show everything. Does anyone know of a possible way to get it to just show the first option on page load?

Answer 1

You can do this without removing your css

$(function(){
  $('.newboxes').first().show(200);
});