Python-100-Days/Day21-30/code/demo02/example10.html

45 lines
1.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<label>你的爱好:&nbsp;</label>
<input type="checkbox" name="fav">旅游
<input type="checkbox" name="fav">游戏
<input type="checkbox" name="fav">美食
<input type="checkbox" name="fav">阅读
<input type="checkbox" name="fav">睡觉
<input type="checkbox" name="fav">其他
<a href="javascript:void(0);">全选</a>
<a href="javascript:void(0);">取消</a>
<a href="javascript:void(0);">反选</a>
</form>
<script>
(function() {
var allAnchors = document.querySelectorAll('form a');
var favList = document.querySelectorAll('input[name=fav]');
allAnchors[0].addEventListener('click', function() {
for (var i = 0; i < favList.length; i += 1) {
// favList[i].setAttribute('checked', '');
favList[i].checked = true;
}
});
allAnchors[1].addEventListener('click', function() {
for (var i = 0; i < favList.length; i += 1) {
// favList[i].removeAttribute('checked');
favList[i].checked = false;
}
});
allAnchors[2].addEventListener('click', function() {
for (var i = 0; i < favList.length; i += 1) {
favList[i].checked = !favList[i].checked;
}
});
})();
</script>
</body>
</html>