0

下面是通过给出checked =“checked”来检查radiobutton标签默认值的代码，但我无法默认显示相关表单，只有当我点击它时才能显示，如何显示任何人这些形式默认？

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/

4

1 回答 1

0

您的 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 所说。

于 2013-10-04T00:03:35.490 回答