Question

这是我课堂作业的一部分。这是一个小型的Web应用程序。下面的代码部分是选择按钮（复选框）的功能。代码工作正常。

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

未捕获的TypeError：无法设置属性＆＃39;已检查＆＃39;是的       在selectGirls（indexj.js：163）
      在HTMLAnchorElement.onclick（index.html：137）

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

我想对所有页面使用相同的JS文件。我的问题是如何尽可能避免这些控制台错误？我不想让它们作为解决方案隐藏在控制台之外。我非常感谢你的意见。

＆＃13;

function selectAllStudents() {
    unselectAllStudents();
    let boxes = $(".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;
}

＆＃13;

Answer 1

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

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

Answer 2

使用id和if

的方法

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

使用类

的方法

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

Answer 3

我用来做

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

Answer 4

我看到你已经在使用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);
}

Answer 5

如果您将它们全部设置为已检查状态，请按class选择它们并循环显示它们。这样一来，如果找不到任何东西就无所谓。

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

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

Answer 6

由于您已标记了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;
  }
});

Answer 7

你可以这样做：

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

elem && elem.checked = true;

Answer 8

SELECT city, phone FROM buildings ORDER BY city ASC, phone DESC;

Answer 9

如果您要检查元素是否存在并将其分配给变量（如果元素不存在，则将其设置为“ false”），则可以使用此方法：

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

JS检查getElementById是否存在

9 个答案:

使用id和if

使用类