for 循环.checked = true 仅最后一个选中，而 setAttribute('checked',true) 都成功

Question

如下示例代码：将 3 个 checkbox 都勾选上。为什么 setAttribute 可以，直接给checked 赋值却不行？

  var test = document.getElementById('test');

//   可以
   for (var i = 0; i < 3; i++) {
     test.innerHTML += `<input type="checkbox" class="c" />`;
     document.getElementsByClassName('c')[i].setAttribute('checked',true);
   }


//   不可以
  for (var i = 0; i < 3; i++) {
    test.innerHTML += `<input type="checkbox" class="c" />`;
    document.getElementsByClassName('c')[i].checked = true;
  }

Answer 1

根据 HTML DOM checked 属性 中的例子选定以及不选定 checkbox ，checkboxObject.checked=true|false 直接赋值是可以改变checkbox的勾选状态的。

你那种写法的结果是三个checkbox的最后一个勾选了。原因是for循环到i=3时，test.innerHTML+=赋值的是三个没有checked属性的，然后跟着执行了document.getElementsByClassName('c')[3].checked = true这句，所以，只有最后一个勾选了。你可以打个断点看下，for循环的每个i执行的时候，都是当前i对应的那个checked设置了true。

改成两次for循环的话，能成功：

for (var i = 0; i < 3; i++) {
    test.innerHTML += `<input type="checkbox" class="c" />`;
 }
for (var i = 0; i < 3; i++) {
    document.getElementsByClassName('c')[i].checked = true;
 }

另外一种办法就是将代码改成如下：（input里面加了checked）这样就可以了。

for (var i = 0; i < 3; i++) {
    test.innerHTML += `<input type="checkbox" class="c"  checked/>`;
    //document.getElementsByClassName('c')[i].checked = true;这句不用写即可
  }

至于原因，我想可能是innerHTML设置的checkbox不包含checked属性，而setAttribute()方法是创建或改变某个新属性，可以给它创建这个checked属性，而.checked赋值只是用来改变其默认值，不能给input创建checked属性。

另外说明几点：

1. checked 属性只会影响checkbox 的默认 checked 值
2. 使用 setAttribute 可以 直接在Dom 中添加 checked 属性
3. 对于innerHTML 的赋值操作会 导致 内部元素的重新渲染
4. checked 的标准用法使 checked="checked" 或 checked

Answer 2

想半天搞明白了，先看题主前面的代码：

var test = document.getElementById('test')
for (let i = 0; i < 3; i++) {
  test.innerHTML += `<input type="checkbox" class="c" name=${i} id=${String(
    i
  )} />`
  document.getElementsByClassName('c')[i].checked = true
  console.log(test.innerHTML)
}

我log了innerHTML，截图：

1. 题主在每次循环的时候，都修改了相应的checkbox的checked属性，没错
2. 但是没有修改test的innerHTML,因为设置checked属性的操作不会在innerHTML中反映出来，跟没有设置checked属性的innerHTML是一样的，而test的innerHTML是在上一步操作的结果上累加（实际上是重新赋值的），所以每次改写innerHTML都导致上一步设置checked属性的操作被新的innerHTML重新渲染，就像是没有设置checked属性一样
3. 除了最后一次成功了，因为没有被再次改写了；

同理，为什么setAttribute成功了，因为setAttribute 改写了innerHTML如代码，截图：

var test = document.getElementById('test')
for (let i = 0; i < 3; i++) {
  test.innerHTML += `<input type="checkbox" class="c" />`
  document.getElementsByClassName('c')[i].setAttribute('checked', true)
  console.log(test.innerHTML)
}

Answer 3

setAttribute这个方法就是JS提供设置元素属性的方法