Javascript 为什么top输入功能不起作用？

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

但在第二区没关系

为什么区域1功能不起作用

多谢各位

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>

区域1




bbbbbb


中交
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；
};
}










区域2




222222


333333
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；
};
}

第二个

窗口。onload

覆盖第一个窗口。

第二个

窗口。onload

覆盖第一个窗口

为什么区域1功能不起作用

因为您正在覆盖

窗口。使用新函数重新加载

。页面加载时，仅执行上次分配的函数

这就是为什么要使用绑定事件处理程序的原因之一：

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

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

有两种选择：

• 将两个函数聚合为一个
• 显式创建函数并在事件处理程序中调用这两个函数。例如

  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>
  

  区域1
  
  
  
  
  bbbbbb
  
  
  中交
  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；
  };
  

---

我建议你读书。本文将解释如何绑定事件处理程序的所有不同方式

为什么区域1功能不起作用

因为您正在覆盖

窗口。使用新函数重新加载

。页面加载时，仅执行上次分配的函数

这就是为什么要使用绑定事件处理程序的原因之一：

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

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

有两种选择：

• 将两个函数聚合为一个
• 显式创建函数并在事件处理程序中调用这两个函数。例如

  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>
  

  区域1
  
  
  
  
  bbbbbb
  
  
  中交
  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；
  };
  

---

---

我建议你读书。解释了如何绑定事件处理程序的所有不同方式。

您不能将窗口。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>

区域1




bbbbbb


中交










区域2




222222


333333
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；
};
}

您不能拥有窗口。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>

区域1




bbbbbb


中交










区域2




222222


333333
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；
};
}

I改为

window.addEventListener（'load'，function（）{document.getElementById（'b'）。onchange=function（）{document.getElementById（'c'）。checked=false；document.getElementById（'a'）。disabled=this.checked；}；document.getElementById（'c'）。onchange=function（）{document