如何在複選框被選中時更新文本框？

我有下面的代碼，我似乎無法弄清楚爲什麼它不工作。如何在複選框被選中時更新文本框？

的JavaScript：

function hourmin() { 
     if (document.getElementById('hourmin').checked == 1){ 
      document.getElementById('total').value = "01:00"; 
     }else{ 
      document.getElementById('total').value = "00:00"; 
     } 
    }

HTML：

<p>Total Time: <BR><input type="text" style="width:95%;" id="total" name="total" value="" readonly="readonly"/> 
    <input type="checkbox" id="hourmin" name="hourmin" onclick="hourmin();">Pay Hour Minimum?

來源

2013-10-31 Joel Lewis

什麼是錯誤您收到？我把它放在代碼和它的工作：http://codepen.io/anon/pen/FblhA – sCaRy1337

JSFiddle + Firebug報告'hourmin'不是一個函數。有趣。 – naththedeveloper

@FDL使用Pure JS和no-wrap（head）配置它，它按預期工作。 –

您使用了錯誤的選項中的jsfiddle

http://jsfiddle.net/EQHRV/3/

onLoad選項會將您的整個腳本封裝到window.onload中，因此您的函數在全局範圍內將無法訪問。

window.onload = function(){ 
    //your code 
}

將其更改爲

No wrap - in HEAD或No wrap - in BODY

enter image description here

您也可以通過創建window參考迫使你的變量/函數是可在全球範圍內

window.hourmin = function(){ 
    ... 
}

但我想建議避免使用內嵌腳本像onclick="etc()"

http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/ http://www.unicodegirl.com/from-inline-events-to-addeventlistener.html

編輯：

可能造成這不是可能出現的問題在您的網站上工作

元素的ID應該是唯一的
JavaScript是大小寫敏感的hourmin是不一樣的hourMin
由於您使用內聯事件被調用的函數應該在全球範圍內，確保它不會裏面嵌套另一個功能
檢查文檔的語法錯誤
WebInspector是你的朋友

Safari - WebInspector
Chrome - DevTools
Opera - Dragonfly

來源

2013-10-31 14:20:00

這固定了小提琴，任何想法，爲什麼它不會在我的網站上工作？ –

它應該工作，試着在hourmin函數裏放一個'alert'（'Hi'）'看看它是否被觸發 –

我做到了這一點，並且由於某種原因它沒有，仍然試圖找出原因。我的其他功能正在工作，所以它令我困惑 –

你的代碼是好的，但我建議你使用onchange代替onclick

<p>Total Time: <BR><input type="text" style="width:95%;" id="total" name="total" value="" readonly="readonly"/> 
<input type="checkbox" id="hourmin" name="hourmin" onchange="hourmin()">Pay Hour Minimum?

DEMO

在您的網站，這是行不通的，它可能是問題具有相同編號的多個元素

DEMO

在本演示中，我創建另一個div具有相同ID：hourmin。你會發現它無法正常工作。

如果您在確定是否存在重複的ID時遇到問題。你可以和應該得到複選框在event參數onchange="hourmin(event)

DEMO

來源

2013-10-31 14:23:10

如果你看看螢火蟲或某些JS的調試工具，你可以看到你的函數沒有找到，因爲它不是招」沒有被加載。

。更改的jsfiddle把你的JavaScript來

像這樣的地方：

JSFiddle javascript code placement