僅當另一個複選框被選中時才顯示文本輸入字段

我有一個將數據發佈到proccess.php文件的表單。在我正在驗證輸入的表單中。有一個複選框詢問是否使用雙人自行車。我希望它僅在框中打勾時才顯示文本輸入字段。這是我對於耳點表單代碼：僅當另一個複選框被選中時才顯示文本輸入字段

<tr> 
    <td> 
    <span style="font-weight:bold">Tandem:</span> 
    </td> 
    <td valign="middle"> 
    <input type="checkbox" name="tandem">&nbsp; 
    <input style="visibility:hidden" type="text" name="partnerid" id="partnerid"> 
    </td> 
</tr>

基本上，如果勾選「串聯」被選中，設置文本輸入框「PARTNERID」 visibility:visible;

來源

2011-10-07 SebastianOpperman

大概投入是一個形式，所以你可以把一個點擊，使文字輸入可見或不基於複選框聽者無論是檢查還是不：

<input type="checkbox" name="tandem" onclick=" 
    this.form.partnerid.style.visibility = this.checked? 'visible' : 'hidden'; 
    ">

這似乎是合乎邏輯的使用改變事件，但在IE不會觸發，直到該複選框失去重點，這是有點反直覺，所以使用cl ICK。

來源

2011-10-07 11:04:27 RobG

我推薦使用這段代碼。當輸入元素的disabled屬性爲true時，該元素無法編輯。用戶通常會指示不應使用輸入字段。

<input type="checkbox" name="tandem" onchange="this.form.partnerid.disabled=!this.checked" />

代碼的說明：

onchange=".."當複選框的值發生變化時觸發。這可以通過單擊或使用鍵盤來實現。 爲此目的，點擊事件不夠用。
this.form來自表單元素事件偵聽器的上下文引用表單
然後可以通過this.form.element_name或this.form["element_name"]訪問所有命名錶單元素。
當複選框被選中時（checked==true），輸入不應被禁用（disabled=false）。這是通過使用協商完成的：this.form.partnerid.disabled = !this.checked。

來源

2011-10-07 11:06:42

Thnak you for the great answer。我希望它只能改變能見度。謝謝 – SebastianOpperman

在複選框失去焦點之前，IE中的更改事件不會觸發，因此使用鼠標進行檢查不會使輸入可見，直到焦點移動爲止。如果使用鍵盤檢查複選框（如Safari，Firefox和IE），大多數瀏覽器都會觸發點擊事件。 – RobG

如果我有兩個輸入需要啓用，我該怎麼做？ – treblaluch

僅當另一個複選框被選中時才顯示文本輸入字段

回答

相關問題