JavaScript实现选中奇数序号复选框的代码问题咨询

原代码存在的问题 #

• 变量无法直接嵌入CSS选择器字符串：nth-child(i)中的i会被CSS选择器识别为普通字符，不会读取JS循环中的i变量值，导致选择器无效无法匹配到元素
• 计数逻辑不匹配：nth-child()是从1开始计数的，你循环的i从0开始，若要匹配页面中第1、3、5、7个奇数序号的列表项，需要调整参数对应关系
• 缺少元素存在校验：如果对应序号的元素不存在，直接调用click()会抛出JS异常，导致后续代码中断

修正后代码 #

循环实现版本 #

for(let i=1;i<=8;i++){
  if(i%2==1){
    const checkbox = document.querySelector(`ul.todo-list > li:nth-child(${i}) input.toggle`)
    checkbox && checkbox.click()
  }
}

更简洁的原生选择器实现（无需循环，性能更高） #

直接利用CSS内置的odd奇数匹配规则，无需手动循环判断：

document.querySelectorAll("ul.todo-list > li:nth-child(odd) input.toggle").forEach(el => el.click())

内容的提问来源于stack exchange，提问作者Abhishek Kanuganti