如何检查单选按钮标签的默认值并显示其相关内容

how to check the default value of a radiobutton tag and display its related contents?

本文关键字：显示 默认值 何检查 检查 标签 单选按钮      更新时间：2023-09-26

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

.HTML：

    <form>
  <label><input value="1" type="radio" name="formselector" checked="checked" onclick="displayForm(this)">Old Definitions</label>    
  <label><input value="2" type="radio" name="formselector" onclick="displayForm(this)">New Definition</label> 
  </form>
 <panel method="post" style="visibility:hidden" id="form1" name="form1">
 <table style="width:100%;">
   <tr>
    <th ><span class="dropt">ID Reserve Tracks</th>
  <td> 
      <input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" >
 </td>
    </tr>
   </table>
   </panel>
   <panel style="visibility:hidden" id="form2">
   <table style="width:100%;">
   <th ><span class="dropt">MD Reserve Tracks</th>
  <td>
  <input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" >
  </td>
   </table>
    </panel>

JavaScript：

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

JSFIDDLE： http://jsfiddle.net/uLkHk/

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

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

相关文章：