這個東西我蠻常用到的  因為我們的網頁必須要根據使用者想要的功能 適當的關掉或開啟一些輸入欄位
寫法是抄之前別人寫的網頁  稍微研究一下  盡量只留必要的程式碼
程式事實上有三部份  可以依照需要自己配對 radio/select/checkbox(動作) 配上 table/input_text/tr(對象)

<script language="JavaScript">
function ShowTable() {
    if( aRadio[1].checked ) theTable.style.display = 'none';
    else theTable.style.display = '';
    if( aSelect.value=="OFF" ) theInputText.style.display = 'none';
    else theInputText.style.display = '';
    if( !aCheckBox.checked ) theTR.style.display = 'none';
    else theTR.style.display = '';
}
</script>
<body onLoad="ShowTable()">
    <input type="radio" name="aRadio" onClick="ShowTable()">Show Table
    <input type="radio" name="aRadio" checked onClick="ShowTable()">Hide Table
    <table id="theTable" border="1"> <!-- 不知道為啥 這邊不能用name 要用id -->
        <tr><td>The table we want to hide.</td></tr>
    </table>
    <br>
    <select name="aSelect" onChange="ShowTable()">
    <!-- 如果用onClick 則不變更選項 也會產生作用 可是畫面會跳來跳去 產生一些小錯亂 -->
        <option value="ON">Show Inputext</option>
        <option selected value="OFF">Hide Inputext</option>
    </select>
    <input type="text" name="theInputText" value="input text">
    <br>
    <input type="checkbox" name="aCheckBox" onClick="ShowTable()">Show TR
    <table border="1">
        <tr id="anotherTR"><td>Another TR TD1</td><td>Another TR TD2</td></tr>
        <tr id="theTR"><td>The TR TD1</td><td>The TR TD2</td></tr> <!-- 這邊也不能用name 要用id -->
    </table>
</body>
arrow
arrow
    全站熱搜

    大喵咪 發表在 痞客邦 留言(1) 人氣()

    E-mail轉寄