javascript+html 實現隱藏 顯示

來源:互聯網
上載者:User
1 <td>2          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3           <input type="radio" id="rbtAll" name="radioType" value="上傳檔案夾" checked="checked" onclick="checking1()" />上傳檔案夾    4         5           &nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6           <input type="radio" id="rbtOne" name="radioType" value="上傳單個檔案" onclick="checking2()" />上傳單個檔案   7         </td>

 

 1 function checking1() { 2                 if ($("rbtAll").checked) { 3                     document.getElementById('All').style.display = document.getElementById('All').style.display == 'none' ? '' : 'none'; 4                     if ($("rbtOne").checked != true) { 5                        document.getElementById('One').style.display = document.getElementById('One').style.display == 'none' ? '' : 'none'; return false; 6                     7                    } 8                 } 9            }10            function checking2() {11                if ($("rbtOne").checked) {12                    document.getElementById('One').style.display = document.getElementById('One').style.display == 'none' ? '' : 'none';13                    if ($("rbtAll").checked != true) {14                        document.getElementById('All').style.display = document.getElementById('All').style.display == 'none' ? '' : 'none'; return false;                      15                    }16                }17            }
 1 <tr id="All"> 2         <td align=right width=65px>上傳檔案夾:</td> 3         <td> 4             <input type="file" id="importFile" onclick="upload()"/> 5             <input type="button" onclick="upload()"/> 6  7             <!--<input type="radio" id="rbtOk" name="radioType"  value="上傳檔案" checked="checked" onclick="document.getElementById('One').style.display=document.getElementById('One').style.display=='none'?'':'none';return false;"/>上傳檔案 8             <input type="radio" id="rbtNot" name="radioType" value="上傳整個檔案夾"/> 上傳整個檔案夾--> 9         </td>10     </tr> 11 12     <tr id="One">13         <td align="right">上傳檔案:</td>14         <td colspan="3">15             <!--隱藏的iframe來接受表單提交的資訊-->16             <iframe name="ajaxifr" style="display: none;"></iframe>17             <!--這裡設定target="ajaxifr",這樣表單就提交到iframe裡面了,和平時未設定target屬性時預設提交到當前頁面18              <!--注意一點的是使用iframe時在提交到的頁面可以直接輸出js來操作父頁面的資訊,一般的ajax提交文本資訊時你需要返回資訊,如果是js資訊你還得eval下,action代表瀏覽者輸入的資料被傳送到的地方-->19             <form method="post" id="upForm" enctype="multipart/form-data" action="http://www.cnblogs.com/include/Handler.ashx" target="ajaxifr" onsubmit="true">20             <!--Enctype 屬性指定將資料回傳到伺服器時瀏覽器使用的編碼類別型-->21             <input name="sPath" id="sPath" type="hidden" />22             <div id="FileCollection"><input type="file" name="File" class="txtbox" runat="server" id="FileName" style="width: 400px" onchange="splitfilename(this.value)" /><font color="red">*</font></div>23             </form>24         </td>     25         </tr>

 

1 //如果想一開始就隱藏,可以把它在html的最後面2 <script type="text/javascript">3     checking();4     function checking() {5             document.getElementById('One').style.display = document.getElementById('One').style.display == 'none' ? '' : 'none'; return false;6     }7     </script>

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.