表单美化至--复选框

最新推荐文章于 2021-06-03 18:54:35 发布

玫瑰余香fly

最新推荐文章于 2021-06-03 18:54:35 发布

阅读量473

点赞数

分类专栏：前端技术文章标签： JavaScript html 表单 label function

本文链接：https://blog.csdn.net/jinchun20100615/article/details/45871073

版权

前端技术专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选按钮</title>
<link rel="stylesheet" href="basic.css">
<style type="text/css">
.typelist{width: 500px;height: 30px;border: 1px solid #dfdfdf;border-width: 1px 0;margin: 20px auto 0;overflow: hidden;padding-left: 20px;font: 12/22 "微软雅黑";}
.checklist li{float: left;padding-right: 20px;line-height: 30px;position: relative;padding-left: 28px;}
.checklist input{display: none;}
.checklist li b{width: 25px;height: 25px;position: absolute;top: 3px;left: 0;background-image: url(checkbox.gif);background-position: -11px -15px;}
.checklist li:hover b{background-position: -11px -115px;}
.checklist .selected b{background-position: -11px -215px;}
.checklist .selected:hover b{background-position: -11px -315px;}

</style>
<script text="text/javascript">
window.οnlοad=function(){
function addtagb(){//添加b标签
var li = document.getElementById("checklist").getElementsByTagName("li");
var label;
for(i = 0;i < li.length;i++){
label = li[i].getElementsByTagName("label");
var bTag = document.createElement("b");
li[i].insertBefore(bTag,label[0]);
}
};
function checkbox(){//复选框点击变化
var li = document.getElementById("checklist").getElementsByTagName("li");
for(i = 0;i < li.length;i++){
li[i].onclick = function(){
if(this.className != "selected"){
this.className = "selected";
}else{
this.className = null;
}
}
}
}
addtagb();
checkbox();
}

</script>

</head>
<body>
<div class="typelist">
<form action="#" method="post" name="typelist">
<ul class="checklist" id="checklist">
<li class="selected"><input type="checkbox" name="typelist" id="xiao"><label for="xiao">消费者保障</label></li>
<li><input type="checkbox" name="typelist" id="po"><label for="po">破损补寄</label></li>
<li><input type="checkbox" name="typelist" id="sevendays"><label for="sevendays">7天退换</label></li>
<li><input type="checkbox" name="typelist" id="zheng"><label for="zheng">正品保障</label></li>
<li><input type="checkbox" name="typelist" id="dian"><label for="dian">电子凭证</label></li>
<li><input type="checkbox" name="typelist" id="wang"><label for="wang">旺旺在线</label></li>
<li><input type="checkbox" name="typelist" id="brand"><label for="brand">品牌授权</label></li>
</ul>
</form>
</div>



</body>

</html>

主要应用insertBefore（）函数。

玫瑰余香fly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单美化至--复选框

复选按钮.typelist{width: 500px;height: 30px;border: 1px solid #dfdfdf;border-width: 1px 0;margin: 20px auto 0;overflow: hidden;padding-left: 20px;font: 12/22 "微软雅黑";}.checklist li{float: left;padd
复制链接

扫一扫