<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用HTML5的JavaScript选择器操作页面中的元素</title>
</head>
<body>
<div>
<!--信息输入标签-->
<h2>兴趣和爱好:<label></label></h2>
<!--复选框列表-->
<input type="checkbox" id="c1"><label for="c1">篮球</label>
<input type="checkbox" id="c2"><label for="c2">唱歌</label>
<input type="checkbox" id="c3"><label for="c3">游泳</label>
<input type="checkbox" id="c4"><label for="c4">桌球</label>
<br><br>
<button>获取兴趣爱好</button>
</div>
<script type="text/javascript">
//监听获取按钮的点击事件(元素选择器)
document.querySelector('button').addEventListener('click',function(e){
//按钮默认事件
e.preventDefault();
//获取所有选中的复选框(伪类选择器)
var checked=document.querySelectorAll('input:checked'),
results=[];//结果数组
//将元素列表转化为数组
checked=Array.prototype.slice.call(checked);
//循环数组,获取选中的值
checked.forEach(function(item){
var id=item.getAttribute('id'),//获取复选框id
//(属性选择器)
label=document.querySelector('label[for="'+id+'"]');//根据id获取对应label元素
results.push(label.innerHTML);//将数值推入数组
});
//(子元素选择器)
document.querySelector('h2>label').innerHTML=results.join(',');//设置显示标签内容
});
</script>
</body>
</html>