点击li不会打钩
只有点b标签才能打钩，这个bug应该怎么改？
9 回答
查看1条回复
网址是我的代码包，我遇到的问题是点击文字的时候并不能每次都能选中，也就是前面的图片没有显示对勾。
这是图片.typeList{
width:540px;
height:30px;
margin:50px auto;
border:1px solid #dfdfdf;
border-width:1px 0px;
}
.typeList ul{
height:30px;
line-height:30px;
padding-left:15px;
}
.typeList ul li{
float:left;
margin-right:12px;
position:relative;
}
.typeList ul li b{
display:block;
width:20px;
height:20px;
background:url(../images/checkbox.gif) -12px -18px;
position:absolute;
top:6px;
left:0px;
}
.typeList ul li label{
padding-left:23px;
}
.typeList ul li:hover b{
background:url(../images/checkbox.gif) -12px -118px;
}
.typeList ul .selected b{
background:url(../images/checkbox.gif) -12px -218px;
}
.typeList ul .selected:hover b{
background:url(../images/checkbox.gif) -12px -318px;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>表单美化</title>
<link rel="stylesheet" type="text/css" href="css/public.css">
<link type="text/css" href="css/typeList.css" rel="stylesheet">
<script type="text/javascript">
function addLoadEvent(func){
var oldonload=window.onload;//得到上一个onload事件的函数
if(typeof window.onload!='function'){//判断类型是否为"function",type返回的是字符串
window.onload=func;
}
else{
window.onload=function(){
oldonload();//调用之前覆盖的onload时间函数。
func();//调用当前事件函数
}
}
}
function createTag(){//动态创建<b>标签
var li=document.getElementById("checkList").getElementsByTagName("li");
var label;
for(var i=0;i<li.length;i++){
label=li[i].getElementsByTagName("label");
var bTag=document.createElement("b");
li[i].insertBefore(bTag,label[0]);
}
}
function checklist(){//点击变换效果
var li=document.getElementById("checkList").getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onclick=function(){
if(this.className==="selected"){
this.className="";
}
else{
this.className="selected";
}
}
}
}
addLoadEvent(createTag);
addLoadEvent(checklist);
</script>
</head>
<body>
<div class="typeList">
<form action="#" method="post" name="typeList">
<ul id="checkList">
<li><input type="checkbox" name="typeList" id="xiao" /><label for="xiao">消费者保障</label></li>
<li class="selected"><input type="checkbox" name="typeList" id="broken" /><label for="broken">破损补寄</label></li>
<li><input type="checkbox" name="typeList" id="sevenday" /><label for="sevenday">7天退换</label></li>
<li><input type="checkbox" name="typeList" id="good" /><label for="good">正品保障</label></li>
<li><input type="checkbox" name="typeList" id="ele" /><label for="ele">电子凭证</label></li>
<li><input type="checkbox" name="typeList" id="wang" /><label for="wang">旺旺在线</label></li>
<li><input type="checkbox" name="typeList" id="pinpai" /><label for="pinpai">品牌授权</label></li>
<li><input type="checkbox" name="typeList" id="pay" /><label for="pay">货到付款</label></li>
<li><input type="checkbox" name="typeList" id="credit" /><label for="credit">信用卡</label></li>
</ul>
</form>
</div><!-- typeList结束 -->
</body>
</html>
举报
0/150
提交
取消
