li的点击事件无法加载，帮忙看下代码有什么问题
function selected()这个函数没有加载，点击事件没有发生，代码如下：
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="Img/icon" href="抽屉.ico">
<meta charset="UTF-8">
<title>复选框美化</title>
<style type="text/css">
*{padding: 0;margin:0;}
li{list-style: none;}
body{font:13px/26px "微软雅黑"}
.typeList {width: 500px;height: 28px;border: 0.5px solid #666;border-width: 1px 0;margin: 66px auto}
.typeList ul{height: 30px;line-height: 30px;overflow: hidden;}
.typeList ul li{float: left;padding-left: 25px;position: relative;}
.typeList input{display: none;}
.typeList b{display:block;width: 20px;height: 20px;background: url(Img/checkbox.gif) no-repeat -12px -17px;position: absolute;top: 4px}
.typeList ul li label{margin-left: 20px}
.typeList ul li:hover b{background-position:-12px -217px;}
.typeList ul .selected b,.typeList ul .selected:hover b{background-position: -12px -317px;}
</style>
<script src="JavaScript/同时页面加载多个.js"></script>
<script type="text/javascript">
function insert(){
var li = document.getElementById("checkList").getElementsByTagName("li");
var label = document.getElementById("checkList").getElementsByTagName("label");
for (var i = 0; i < li.length;i++) {
//var label = li[i].getElementsByTagName('label');
var tagB=document.createElement("b");
li[i].insertBefore(tagB,label[i]);
}
}
function selected(){
var li=document.getElementById("checkList").getElementsByTagName("li");
for(var i=0;i<i.length;i++){
var b = li[i].getElementsByTagName('b');
li[i].onclick=function(){
// b[0].style.backgroundPosition="-12px -217px";
if(this.className=="selected"){
this.className=null;
}else{
this.className="selected";
}
}
}
}
addLoadEvent(insert);
addLoadEvent(selected);
</script>
</head>
<body>
<div>
<form action="#" method="post">
<ul id="checkList">
<li><input type="checkbox" id="HW"><label for="HW">华为</label></li>
<li><input type="checkbox" id="XM"><label for="XM">小米</label></li>
<li><input type="checkbox" id="SS"><label for="SS">三星</label></li>
<li><input type="checkbox" id="OP"><label for="OP">OPPO</label></li>
<li><input type="checkbox" id="VV"><label for="VV">ViVO</label></li>
<li><input type="checkbox" id="MZ"><label for="MZ">魅族</label></li>
<li><input type="checkbox" id="IP"><label for="IP">苹果</label></li>
</ul>
</form>
</div>
</body>
</html>
秀man1回答
-
其实我真的不是东北人
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>复选框美化</title> <style type="text/css"> *{padding: 0;margin:0;} li{list-style: none;} body{font:13px/26px "微软雅黑"} .typeList {width: 500px;height: 28px;border: 0.5px solid #666;border-width: 1px 0;margin: 66px auto} .typeList ul{height: 30px;line-height: 30px;overflow: hidden;} .typeList ul li{float: left;padding-left: 25px;position: relative;} .typeList input{display: none;} .typeList b{display:block;width: 20px;height: 20px;position: absolute;top: 4px} .typeList ul li label{margin-left: 20px} .typeList ul li:hover b{background-position:-12px -217px;} .typeList ul .selected b,.typeList ul .selected:hover b{background-position: -12px -317px;} </style></head><body><div> <form action="#" method="post"> <ul id="checkList"> <li><input type="checkbox" id="HW"><label for="HW">华为</label></li> <li><input type="checkbox" id="XM"><label for="XM">小米</label></li> <li><input type="checkbox" id="SS"><label for="SS">三星</label></li> <li><input type="checkbox" id="OP"><label for="OP">OPPO</label></li> <li><input type="checkbox" id="VV"><label for="VV">ViVO</label></li> <li><input type="checkbox" id="MZ"><label for="MZ">魅族</label></li> <li><input type="checkbox" id="IP"><label for="IP">苹果</label></li> </ul> </form></div><script> function insert(){ var li = document.getElementById("checkList").getElementsByTagName("li"); var label = document.getElementById("checkList").getElementsByTagName("label"); for (var i = 0; i < li.length;i++) {//var label = li[i].getElementsByTagName('label'); var tagB=document.createElement("b"); li[i].insertBefore(tagB,label[i]); } } function selected(){ var li=document.getElementById("checkList").getElementsByTagName("li"); for(var i=0;i<li.length;i++){ var b = li[i].getElementsByTagName('b'); li[i].onclick=function(){// b[0].style.backgroundPosition="-12px -217px"; if(this.className=="selected"){ this.className=null; }else{ this.className="selected"; } } } } insert();selected();</script></body></html>-----------------------------------------------------------------------for(var i=0;i<i.length;i++) 这里是li.length, 不是i.length
随时随地看视频慕课网APP
Html/CSS
JavaScript
前端工具