代码放送点：
ps:图片自己更改哦
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.ul1{margin:20px 0px;}
.ul1.before,.ul1.after{display:table;content:"";}
.ul1.after{clear:both}
.ul1 li{width:100px;list-style:none;float:left;border:1px solid #000;margin-right:10px;}
img{width:100px;height:100px;}
</style>
</head>
<body>
<p>你喜欢哪位精灵呢？</p>
<input type="button" value="全选" />
<input type="button" value="取消全选" />
<ul class="ul1">
<li><img src="img/鸢一折纸.png" /><input type="checkbox" name="check" /><span>鸢一折纸</span></li>
<li><img src="img/时崎狂三.png" /><input type="checkbox" name="check" /><span>时崎狂三</span></span></li>
<li><img src="img/五河琴里.png" /><input type="checkbox" name="check" /><span>五河琴里</span></li>
<li><img src="img/夜刀神十香.png" /><input type="checkbox" name="check" /><span>夜刀神十香</span></li>
<li><img src="img/吃猫的鱼.png" /><input type="checkbox" name="check" /><span>吃猫的鱼</span></li>
</ul>
<script>
var aBtn = document.getElementsByTagName("input");
aBtn[0].onclick = function(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].checked = true;
}
}
aBtn[1].onclick = function(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].checked = false;
}
}
</script>
</body>
</html>