如何选择单选按钮并解析该值

时间:2016-05-02 19:50:27

标签: html onload radio

我已经成功地弄清楚如何在加载时选择一个单选按钮,但我还没弄明白如何在不必点击单选按钮的情况下显示该按钮的值。我试图显示/隐藏各种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>

1 个答案:

答案 0 :(得分:0)

为什么不明确告诉第一个框显示,而不管其他框设置?

.first {
  display:block;
}