看过的一道面试题.一个页面上有若干个checkbox,如何获取这些checkbox的值并输出?
页面结构
<body>
<form name="testForm" id="myform">
<input type="checkbox" value="1" name="checkbox">选项1<br />
<input type="checkbox" value="2" name="checkbox">选项2<br />
<input type="checkbox" value="3" name="checkbox">选项3<br />
<input type="checkbox" value="4" name="checkbox">选项4<br />
<input type="checkbox" value="5" name="checkbox">选项5<br />
</form>
<button onclick="change()">output</button>
<div id="box"></div>
<script>
//some script
</script>
</body>
思路
通过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对象属性生疏了.包括我也是,今天给按钮绑定事件的时候习惯性的用
<button @click="function">
这种绑定写法...checkbox的
checkbox[i].checked
属性也是通过查资料知道的..还是要适当复习的啊.
