JavaScript基础应用实例–点击li实现radio被选中并且出现tips

CSS部分:
<style type=”text/css”>
ul{
width:438px;
}
li{
float:left;
width:146px;
height:80px;
text-align:center;
font-size:12px;
list-style:none;
}
li img{
margin:0 auto;
display:block;
}
</style>

HTML部分:
<ul id=”bxlist”>
<li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input type=”radio” name=”radiobutton” value=”radiobutton” /><label>点击打开宝箱按钮</label></span></li>
<li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input type=”radio” name=”radiobutton” value=”radiobutton” /><label>点击打开宝箱按钮</label></span></li>
<li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input type=”radio” name=”radiobutton” value=”radiobutton” /><label>点击打开宝箱按钮</label></span></li>
<li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input type=”radio” name=”radiobutton” value=”radiobutton” /><label>点击打开宝箱按钮</label></span></li>
<li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input type=”radio” name=”radiobutton” value=”radiobutton” /><label>点击打开宝箱按钮</label></span></li>
<li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input type=”radio” name=”radiobutton” value=”radiobutton” /><label>点击打开宝箱按钮</label></span></li>
</ul>

JS部分:
<script type=”text/javascript”>
function showTips(){
var ful = document.getElementById(“bxlist”);
var lis = ful.getElementsByTagName(“li”);
for (var i=0; i<lis.length; i++){
lis[i].getElementsByTagName(“label”)[0].style.display = “none”;
lis[i].onclick = function(){
this.getElementsByTagName(“input”)[0].checked = “checked”;
this.getElementsByTagName(“input”)[0].onfocus = function(){this.blur()}
for (var j=0; j<lis.length; j++){
var labels = ful.getElementsByTagName(“label”);
labels[j].style.display = “none”;
}
this.getElementsByTagName(“label”)[0].style.display = “block”;
}
}
}
window.onload =showTips
</script>

HTML中IMG来自QQ 谢过

Write a comment