Javascript JS检查getElementById是否存在

这是我课堂作业的一部分。它是一个小型web应用程序。下面的代码部分是用于选择按钮（复选框）的函数。代码运行良好

我的问题是，我在控制台上遇到此错误：

未捕获的TypeError:无法将属性“checked”设置为null
在selectGirls（indexj.js:163）
在htmlanchorement.onclick上（index.html:137）

我知道我得到了这个错误，因为我没有在每个页面上都有这些元素。为了澄清这一点，我的意思是第1页有两个复选框，但第2页有5个复选框，就像这样

我想对所有页面使用相同的JS文件。我的问题是如何以最好的方式避免这些控制台错误？我不想让它们作为解决方案从控制台隐藏。我真的很感谢你的意见

函数selectAllStudents（）{
非选择性学生（）；
让方框=$（“.scores”）.toArray（）；
document.getElementById（'check_Terrilyn'）。checked=true；
document.getElementById（'check_Vinnie'）。checked=true；
document.getElementById（'check_Boren'）。checked=true；
document.getElementById（'check_Tempie'）。checked=true；
document.getElementById（'check_Mapes'）。checked=true；
document.getElementById（'check_Fletcher'）。checked=true；
document.getElementById（'check_Bovee'）。checked=true；
document.getElementById（'check_Figgs'）。checked=true；
}

最简单的方法是检查它们是否存在

if (document.getElementById('check_Terrilyn'))
  document.getElementById('check_Terrilyn').checked = true;

编辑

考虑到复选框数量未知，可以使用一种更现代的方法

它将返回一个元素数组，例如，正如您的代码所建议的，所有checkebox的

id

都以

check\uu

开头，您可以这样使用它：

var els=document.querySelectorAll（'[id^=“check”]'）；
els.forEach（函数（el）{
el.checked=true；
});

我过去常做

if(document.getElementById('check_Terrilyn')!="null")
    document.getElementById('check_Terrilyn').checked=true;

我看到您已经在使用jQuery了。为什么不完全使用它，并停止使用
getElementById

只需执行
$（…）.prop（'checked'，true）
。jQuery将处理找不到元素的情况

function selectAllStudents() {
    unselectAllStudents();
    let boxes = $(".scores").toArray();
    $('#check_Terrilyn, #check_Vinnie, #check_Boren, #check_Tempie, #check_Mapes, #check_Fletcher, #check_Bovee, #check_Figgs').prop('checked',true);
}

如果要将它们全部设置为选中状态，则通过
class
选择它们并循环遍历它们。那样的话，如果找不到也没关系

您似乎也在使用jQuery，因此代码可以简化为：

function selectAllStudents() {
  unselectAllStudents();
  let boxes = $(".scores").toArray();
  $('.checkbox').prop('checked', true);
}

既然您已经标记了jquery，请使用
prop

function selectAllStudents() {
    unselectAllStudents();
    let boxes = $(".scores").toArray();
    $('#check_Terrilyn').prop( "checked", true );
    //for the rest of them
}

或者创建一个ID数组，在设置它们的
checked
属性之前，可以迭代并检查它们是否存在

var array = ['check_Terrilyn', 'check_Vinnie']; //add more ids as required
array.forEach( s => $("#"+s).prop( "checked", true ) );

或者使用普通js

var array = ['check_Terrilyn', 'check_Vinnie']; //add more ids as required
var fnGetEl = (id) => document.getElemetById(id);
array.forEach( s => {
  var el = fnGetEl(s);
  if(el)
  {
    el.checked = true;
  }
});

您可以这样做：

let elm = document.getElementById('check_Terrilyn');

elem && elem.checked = true;

带id和if的进近
课堂教学法
如果您希望检查元素是否存在，同时将其分配给变量（如果元素不存在，则将其设为“false”），则可以使用此选项：

如果要将它们全部设置为选中状态，则通过
class
选择它们并循环遍历它们。这样的话，如果找不到也没关系。谢谢你。我现在就来试试。如果你必须对每个复选框执行N次，然后重复
getElementById（）
调用，我不会称之为“最简单”。@RoryMcCrossan什么是“最简单”取决于你是哪一边的：）。。。在本例中，我只是想展示一种思维方式，并决定保留已经使用的普通js代码。当然，代码本身可以在许多方面进行优化。@LGSon，我可以请您在这里看一个与jQuery相关的问题：？@IstiaqueAhmed现在不能了……只要坚持下去，就会有人来拯救：）
getElementsByClassName（）
返回一个数组。试图设置数组的
checked
属性将导致error@RoryMcCrossan实际上它返回一个HTMLCollection，不是数组。请更具体地说明您的答案，并添加一些解释。当使用许多现有答案为旧问题添加答案时，添加一些解释说明您的答案是如何工作的以及为什么工作的，以及指出您的答案所针对的问题的新方面是非常重要的。
if (document.getElementById('check_Terrilyn')){
    document.getElementById('check_Terrilyn').checked = true;
}

//ES6
Array.from(document.getElementsByClassName('commonclass')).forEach(e => {
    e.checked = true;
});

if(document.getElementById("id_selector2teller")){
alert("id_selector2teller exists");
}else{
alert("id_selector2teller not available");
}

var check_Terrilyn = document.getElementById('check_Terrilyn') ?
                     document.getElementById('check_Terrilyn').checked : false;