使用Javascript更改HTML代碼。不太工作

我有一個相當長的形式在一個頁面上的各種複選框和文本框。有一點我想要一個文本框變得可用，如果勾選了相應的複選框。我幾乎可以使用此代碼：使用Javascript更改HTML代碼。不太工作

<tr class= "formspace"> 
<td class="formleft" valign="top" style="line-height:22px">Extra bed(s)?</td> 
<td colspan="2"><input name="extrabed" type="checkbox" value="1" onChange="jsextrabed()"><?php echo $lang["extraadultx"]." ".$lang["notsingleoccx"];?> 
<div id="extrabednumber"></div> 
<script type="text/javascript"> 
function jsextrabed() { 
if(document.roomnew.extrabed.checked == 1) { 
document.getElementById("extrabednumber").innerHTML='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Max number of extra beds <input name="extrabed" type="text" id="extrabed" size="1" maxlength="1" value="1">'; 
}else{ 
document.getElementById("extrabednumber").innerHTML='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Max number of extra beds <input name="extrabed" type="text" id="extrabed" size="1" maxlength="1" value="0">'; 
} 
} 
</script> 
</td> 
</tr>

當頁面首次打開時，只顯示覆選框。

當我勾選複選框時，文本框打開，值爲1.到目前爲止，這麼好。

當我再次點擊複選框未被選中時，文本框中的值變爲0.仍然不錯。

當我再次點擊時，複選框打勾（好），但文本框中的值保持在0（壞！）。

進一步單擊切換複選框，但對文本框中的值沒有影響。

我做錯了什麼？

來源

2012-07-18 TrapezeArtist

什麼是'document.roomnew'？我想一些'

這真的是需求，但是如果用戶保持預期的行爲複選框未被選中，並在文本框中添加一個非零的數字？不需要在不需要時隱藏文本框？ – 2012-07-18 11:58:57

使用此代碼檢查：

if(document.roomnew.extrabed.checked) {

來源

2012-07-18 11:51:22

'TRUE'（全部大寫）不是JS關鍵字。「真」可能不是最好的。只需直接測試變量以查看它是否真實，例如'if（document.roomnew.extrabed.checked）{...}' – 2012-07-18 11:55:02

穆罕默德和斯科特，我談及你只是使用「檢查」，沒有「==真」或任何類型的。不幸的是，問題仍然存在。我嘗試用「Checked」和「Not checked」替換innerHtml的內容，並且完美地工作，所以似乎在導致問題的innerHtml內部的代碼中存在某些內容。搜索繼續...... – TrapezeArtist 2012-07-18 13:10:15

與

if(document.roomnew.extrabed.checked){ 
} 
else 
{ 
}

來源

2012-07-18 11:54:23

只是檢查有中顯示的代碼沒有問題。

這裏的工作演示：http://jsfiddle.net/dystroy/u6mtW/

HTML：

<tr class= "formspace"> 
<td class="formleft" valign="top" style="line-height:22px">Extra bed(s)?</td> 
<td colspan="2"><input name="extrabed" id=checkextra type="checkbox" value="1" >some php 
<div id="extrabednumber"></div> 
</td> 
</tr>

的Javascript：

<script> 
    window.onload=function(){ 
     document.getElementById('checkextra').onchange = function() { 
      if(this.checked) { 
       document.getElementById("extrabednumber").innerHTML='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Max number of extra beds <input name="extrabed" type="text" id="extrabed" size="1" maxlength="1" value="1">'; 
      }else{ 
       document.getElementById("extrabednumber").innerHTML='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Max number of extra beds <input name="extrabed" type="text" id="extrabed" size="1" maxlength="1" value="0">'; 
      } 
     }; 
    }; 
</script>

我做了一些改動

適應我們沒有整個DOM的事實。你的問題可能在那裏，在我們看不到的部分。
確保功能上的複選框鉤正確地將（您可能還沒有完全加載DOM的問題，根據您的網頁上）

來源

2012-07-18 11:56:50

是的，它適用於JSFiddle，但是當我將代碼複製到文件並放到我的網站上時，它不起作用。我不知道JSFiddle在做什麼，所以無法真正看到從哪裏開始。 – TrapezeArtist 2012-07-18 13:09:07

你把js代碼放在一個onload函數的末尾了嗎？見編輯的答案。 – 2012-07-18 13:10:17

問題解決了！

我用了兩個元素相同的名稱：這兩個複選框，輸入文本框輸入（在innerHTML的被稱爲「extrabed」更改其中的一個已經固定它

感謝大家。誰提供了幫助

來源

2012-07-18 13:24:24 TrapezeArtist

使用Javascript更改HTML代碼。不太工作

回答

相關問題