【问题标题】:How do I select a radio button onload AND parse the value如何选择单选按钮 onload 并解析值
【发布时间】:2016-05-03 04:00:03
【问题描述】:

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

【问题讨论】:

    标签: html onload radio


    【解决方案1】:

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

    .first {
      display:block;
    }
    

    【讨论】:

    • 我可能误解了一些东西,但我将该行添加到我的 css 中并且它不起作用。删除其他任何东西都会破坏整个代码。我明白你所说的背后的逻辑,但我不确定如何实现它。感谢您的及时回复,顺便说一句。
    • 哦,可能是我的浏览器。我正在使用 Chrome。当我点击你的链接时,我看到了 3 个选项——没有一个被选中——并且没有显示 div。我还没有发现您的“显示:阻止”建议。我希望完成的是,如果您的小提琴显示所有 3 个选项,其中第一个已标记并且第一个 div 已显示,而无需我单击任何内容。我希望我能很好地解释自己。我已经对此进行了很多挖掘,所以如果这不可能,也可以告诉我。非常感谢您的帮助。
    • 我想我搞砸了,在我把它链接到你之前忘记更新我的小提琴。对于那个很抱歉。无论如何,这里有一个替代方案,然后:将显示第一个 div 的命令放在 $(document).ready 函数的末尾。 link 这是我最初的尝试,使用 CSS display:block: link
    • 想通了。样式=“显示:块;”必须放在第一个 div 内。
      --- 非常感谢!
    猜你喜欢
    • 2012-02-01
    • 2019-07-28
    • 2019-02-10
    • 2011-04-17
    • 2012-03-24
    • 1970-01-01
    • 2021-09-19
    • 1970-01-01
    • 2017-03-28
    相关资源
    最近更新 更多