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>

または、Barmar が言ったように、デフォルトのパネルの可視性を HTML で可視に設定することもできます。

于 2013-10-04T00:03:35.490 に答える