输出勾选的checkbox

看过的一道面试题.一个页面上有若干个checkbox,如何获取这些checkbox的值并输出?

页面结构

  

    选项1

    选项2

    选项3

    选项4

    选项5

  
  output
  

  

思路

通过document.getElementsByName获取包含所有name为checkbox的对象的数组.随后遍历数组,存在Item的checked,就把值赋值给box的innerHTML.

脚本

function change() {
      var checkbox = document.getElementsByName('checkbox')
      var odiv = document.getElementById('box')
      var val = ''
      for (let i = 0; i < checkbox.length; i++) {
        if (checkbox[i].checked) {
          val += checkbox[i].value + ','
          odiv.innerHTML = val
        }
      }
    }

结论

考验一个前端的基本功,现在前端工程化以及性能优化导致部分前端对基本的dom操作与Html对象属性生疏了.包括我也是,今天给按钮绑定事件的时候习惯性的用

这种绑定写法...checkbox的

checkbox[i].checked

属性也是通过查资料知道的..还是要适当复习的啊.