Question

在区域1中，当我选中复选框bbbbbb或复选框cccccc时输入将禁用，它不起作用

但在第2区，没关系

为什么Area1功能不起作用？

谢谢。

Area 1
<br>
<input type="text" id="a" name="a">   
<br>
<input type="checkbox" id="b" name="b"/> bbbbbb
<br>
<input type="checkbox" id="c" name="c"/> cccccc
</div>

<script type="text/javascript">
window.onload=function(){
document.getElementById('b').onchange = function () {
    document.getElementById('c').checked = false;
    document.getElementById('a').disabled = this.checked;
};
document.getElementById('c').onchange = function () {
    document.getElementById('b').checked = false;
    document.getElementById('a').disabled = this.checked;

};
}
</script>

<br>
<br>
<br>
<br>
<br>
Area 2
<br>

<input type="text" id="1" name="1">   
<br>
<input type="checkbox" id="2" name="2"/> 222222
<br>
<input type="checkbox" id="3" name="3"/> 333333
</div>


<script type="text/javascript">
window.onload=function(){
document.getElementById('2').onchange = function () {
    document.getElementById('3').checked = false;
    document.getElementById('1').disabled = this.checked;
};
document.getElementById('3').onchange = function () {
    document.getElementById('2').checked = false;
    document.getElementById('1').disabled = this.checked;

};
}
</script>

Answer 1

第二个window.onload覆盖了第一个。

Answer 2

为什么Area1功能不起作用？

因为您使用新功能覆盖 window.onload。只有您分配的 last 功能才会在页面加载时执行。

这是使用addEventListener绑定事件处理程序的原因之一：

window.addEventListener('load', function() {
    // ..
});

这允许您将多个处理程序绑定到同一个元素。

有几种选择：

将两个功能合并为一个。

显式创建函数并在事件处理程序中调用它们。 E.g。

function area1() { ... }
function area2() { ... }
window.onload = function() {
    area1();
    area2();
};

根本不要使用window.onload。由于您已将代码放在文档中的元素之后，因此您不需要window.onload。您可以直接运行代码，例如

Area 1
<br>
<input type="text" id="a" name="a">   
<br>
<input type="checkbox" id="b" name="b"/> bbbbbb
<br>
<input type="checkbox" id="c" name="c"/> cccccc
</div>

<script type="text/javascript">
document.getElementById('b').onchange = function () {
    document.getElementById('c').checked = false;
    document.getElementById('a').disabled = this.checked;
};
document.getElementById('c').onchange = function () {
    document.getElementById('b').checked = false;
    document.getElementById('a').disabled = this.checked;

};
</script>

我建议您阅读the excellent articles about event handling on quirksmode.org。解释了如何绑定事件处理程序的所有不同方法。

Answer 3

你不能拥有window.onload = function（）{function两次，它只能声明一次。如果你声明它两次，它将选择其中一个在加载窗口时工作。请改用：

Area 1
<br>
<input type="text" id="a" name="a">   
<br>
<input type="checkbox" id="b" name="b"/> bbbbbb
<br>
<input type="checkbox" id="c" name="c"/> cccccc
</div>
<br>
<br>
<br>
<br>
<br>
Area 2
<br>

<input type="text" id="1" name="1">   
<br>
<input type="checkbox" id="2" name="2"/> 222222
<br>
<input type="checkbox" id="3" name="3"/> 333333

<script type="text/javascript">
window.onload=function(){
document.getElementById('b').onchange = function () {
    document.getElementById('c').checked = false;
    document.getElementById('a').disabled = this.checked;
};
document.getElementById('c').onchange = function () {
    document.getElementById('b').checked = false;
    document.getElementById('a').disabled = this.checked;

};
document.getElementById('2').onchange = function () {
    document.getElementById('3').checked = false;
    document.getElementById('1').disabled = this.checked;
};
document.getElementById('3').onchange = function () {
    document.getElementById('2').checked = false;
    document.getElementById('1').disabled = this.checked;

};
}
</script>

为什么顶级输入功能不起作用？

3 个答案: