Почему функция ввода верхнего уровня не работает?

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 с новой функцией. Только функция, которую вы назначили последней, будет выполняться при загрузке страницы.

Это одна из причин, почему нужно использовать addEventListener связывать обработчики событий:

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> 
  

---

Я рекомендую прочитать the excellent articles about event handling on quirksmode.org. Объясните все различные способы привязки обработчиков событий.

Answer 3

У вас не может быть функция window.onload = 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>