如果選中復選框，如何才能更新文本框？

Question

我有以下代碼，我似乎無法弄清楚為什么它不起作用。

JS小提琴： http ： //jsfiddle.net/EQHRV/

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?

Answer 1

你在JSFiddle中使用了錯誤的選項

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

選項onLoad會將整個腳本包裝到window.onload中，因此您的函數將在全局范圍內無法實現。

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

將其更改為

No wrap - in HEAD或No wrap - in BODY

---

您還可以通過在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-事件到addeventlistener.html

---

編輯：

可能導致此問題無法在您的網站上運行的問題

• 元素id應該是唯一的
• javascript是區分大小寫的， hourmin與hourMin
• 因為你正在使用內聯事件，所以被調用的函數應該在全局范圍內，確保它沒有嵌套在另一個函數中
• 檢查文檔是否存在語法錯誤
• WebInspector是你的朋友

Safari - WebInspector
Chrome - DevTools
歌劇 - 蜻蜓

Answer 2

你的代碼還可以，但我建議你使用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

在您的網站上，它不起作用，它可能是具有相同ID的多個元素的問題

DEMO

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

如果您在確定是否存在重復ID時遇到問題。 你可以而且應該在event參數中獲取復選框onchange="hourmin(event)

DEMO

Answer 3

如果你看一下firebug或一些js調試工具，你會發現找不到你的函數，因為它沒有被加載。

更改JSFiddle放置您的JavaScript的位置

像這樣：