码迷,mamicode.com
首页 > Web开发 > 详细

web前端之每天学一点js知识第二期

时间:2017-09-16 14:58:19      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:html   ble   www.   org   height   text   body   name   dtd   

代码放送点:

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>

web前端之每天学一点js知识第二期

标签:html   ble   www.   org   height   text   body   name   dtd   

原文地址:http://www.cnblogs.com/y5w2z1/p/7531142.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!