javascript - 选中复选框时，如何获取要更新的文本框？

Question

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

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?

score 2 · Accepted Answer

您在 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-事件添加事件监听器.html

编辑：

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

元素 id 应该是唯一的
javascript区分大小写hourmin不一样hourMin
由于您使用的是内联事件，因此被调用的函数应该在全局范围内，请确保它没有嵌套在另一个函数中
检查您的文档是否有语法错误
WebInspector 是你的朋友

Safari - WebInspector
Chrome - DevTools
Opera - Dragonfly

score 1 · Accepted Answer

您的代码没问题，但我建议您使用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?

演示

在您的网站上，它不起作用，可能是具有相同 id 的多个元素的问题

演示

在这个演示中，我创建了另一个div具有相同 id: 的演示hourmin。您会看到它无法正常工作。

如果您在确定是否存在重复 ID 时遇到问题。您可以并且应该在event参数中获取复选框onchange="hourmin(event)

演示