Javascript 如何检查radiobutton标签的默认值并显示其相关内容？_Javascript_Html

Javascript 如何检查radiobutton标签的默认值并显示其相关内容？

javascript html

Javascript 如何检查radiobutton标签的默认值并显示其相关内容？,javascript,html,Javascript,Html,下面是通过给出checked=“checked”来检查radiobutton标签默认值的代码，但默认情况下我无法显示相关表单，只能在单击时显示，默认情况下如何显示这些表单中的任何一个 HTML: jsFIDLE:您的Html格式不正确，您应该对此进行改进。要使其按您所希望的方式工作，只需不设置在HTML中选中的选项。然后在JavaScript中选择它，调用Click方法。看到这一点，我修改了一点你的HTML，它的工作 <html> <body> <for

下面是通过给出checked=“checked”来检查radiobutton标签默认值的代码，但默认情况下我无法显示相关表单，只能在单击时显示，默认情况下如何显示这些表单中的任何一个

HTML:

jsFIDLE:

您的Html格式不正确，您应该对此进行改进。要使其按您所希望的方式工作，只需不设置在HTML中选中的选项。然后在JavaScript中选择它，调用Click方法。看到这一点，我修改了一点你的HTML，它的工作

<html>
<body>
    <form>
    <label>
        <input value="1" type="radio" id="radioOld" name="formselector" onclick="displayForm(this)" />Old
        Definitions</label>
    <label>
        <input value="2" type="radio" id="radioNew" name="formselector" onclick="displayForm(this)" />New
        Definition</label>
    </form>
    <form method="post" style="visibility: hidden" id="form1" name="form1">
    <table style="width: 100%;">
        <tr>
            <td>
                <span class="dropt">ID Reserve Tracks</span>
            </td>
            <td>
                <input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" />
            </td>
        </tr>
    </table>
    </form>
    <form style="visibility: hidden" id="form2">
    <table style="width: 100%;">
        <tr>
            <td>
                <span class="dropt">MD Reserve Tracks</span>
            </td>
            <td>
                <input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" />
            </td>
        </tr>
    </table>
    </form>
    <script>
        function displayForm(c) {
            if (c.value == "1") {
                document.getElementById("form1").style.visibility = 'visible';
                document.getElementById("form2").style.visibility = 'collapse';
            }
            else if (c.value == "2") {
                document.getElementById("form1").style.visibility = 'collapse';
                document.getElementById("form2").style.visibility = 'visible';
            }
            else {
            }
        }   
    </script>
    <script>
        document.getElementById('radioOld').click();

        //document.getElementById('radioOld').checked = true;
        //var theDefaultOption = document.getElementById('formselector');
        //displayForm(theDefaultOption);
    </script>
</body>
</html>


古老的
定义
新的
定义
ID保留轨道
MD备用轨道
函数显示形式（c）{
如果（c.值=“1”）{
document.getElementById（“form1”）.style.visibility='visible'；
document.getElementById（“form2”）.style.visibility='collapse'；
}
否则，如果（c.值=“2”）{
document.getElementById（“form1”）.style.visibility='collapse'；
document.getElementById（“form2”）.style.visibility='visible'；
}
否则{
}
}   
document.getElementById（'radioOld'）。单击（）；
//document.getElementById（'radioOld'）。checked=true；
//var theDefaultOption=document.getElementById（'formselector'）；
//显示形式（默认选项）；

或者，您可以简单地将默认面板的可见性设置为在HTML中可见，正如Barmar所说。

为什么不将默认面板的可见性设置为在HTML中可见？您的HTML无效，那么

面板

元素应该是什么？

         function displayForm(c){
            if(c.value == "1"){
                document.getElementById("form1").style.visibility='visible';
                document.getElementById("form2").style.visibility='collapse';
            }
            else if(c.value =="2"){
                document.getElementById("form1").style.visibility='collapse';
                document.getElementById("form2").style.visibility='visible';
            }
            else{
            }
        }

<html>
<body>
    <form>
    <label>
        <input value="1" type="radio" id="radioOld" name="formselector" onclick="displayForm(this)" />Old
        Definitions</label>
    <label>
        <input value="2" type="radio" id="radioNew" name="formselector" onclick="displayForm(this)" />New
        Definition</label>
    </form>
    <form method="post" style="visibility: hidden" id="form1" name="form1">
    <table style="width: 100%;">
        <tr>
            <td>
                <span class="dropt">ID Reserve Tracks</span>
            </td>
            <td>
                <input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" />
            </td>
        </tr>
    </table>
    </form>
    <form style="visibility: hidden" id="form2">
    <table style="width: 100%;">
        <tr>
            <td>
                <span class="dropt">MD Reserve Tracks</span>
            </td>
            <td>
                <input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" />
            </td>
        </tr>
    </table>
    </form>
    <script>
        function displayForm(c) {
            if (c.value == "1") {
                document.getElementById("form1").style.visibility = 'visible';
                document.getElementById("form2").style.visibility = 'collapse';
            }
            else if (c.value == "2") {
                document.getElementById("form1").style.visibility = 'collapse';
                document.getElementById("form2").style.visibility = 'visible';
            }
            else {
            }
        }   
    </script>
    <script>
        document.getElementById('radioOld').click();

        //document.getElementById('radioOld').checked = true;
        //var theDefaultOption = document.getElementById('formselector');
        //displayForm(theDefaultOption);
    </script>
</body>
</html>