jQuery仿淘宝CheckBox选中效果

2011-11-30 • 伪技术,WEB事儿 • by Nornor Chen

效果预览:

jquery仿淘宝CHECKBOX效果

最近由于项目需求要做一个类似淘宝宝贝页面选中的效果,我称之为checkbox,昨晚用jquery秒杀了一个简陋版,分享之。可以看这里演示。功能比较简陋,如果真正拿来提交数据库,selected数据请自行获得。

jquery代码如下:

<script type="text/javascript">
		$(function(){
			$("#xmchen ul li").click(function(){
				$("#xmchen ul li").find('i').hide();
				$("#xmchen ul li").removeClass("selected");
				$(this).addClass("selected");
				$(this).find('i').show();
				
			});
		});
	</script>

HTML代码:

<div id="xmchen">
		<ul>
			<li><a href="#"><img src="images/1.jpg" width="100px" height="100px"/><i>选中</i></a></li>
			<li><a href="#"><img src="images/2.jpg" width="100px" height="100px"/><i>选中</i></a></li>
			<li><a href="#"><img src="images/3.jpg" width="100px" height="100px"/><i>选中</i></a></li>
			<li><a href="#"><img src="images/1.jpg" width="100px" height="100px"/><i>选中</i></a></li>
		</ul>
	</div>

后语:

做得比较简陋欢迎改善和交流。

« 本人手贱的三则体现

换博客主题与主题优化 »