javascript - 选中复选框后如何更新文本框？

Question

我有以下代码，但我似乎无法弄清楚为什么它不起作用。

JS fiddle :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-events-to-addeventlistener.html

---

编辑:

可能导致此功能无法在您的网站上运行的可能问题

• 元素id应该是唯一的
• javascript 区分大小写 hourmin 与 hourMin 不同
• 因为您使用的是内联事件，所以被调用的函数应该在全局范围内，确保它没有嵌套在另一个函数中
• 检查您的文档是否存在语法错误
• WebInspector 是你的 friend

Safari - WebInspector
Chrome - DevTools
Opera - Dragonfly