jQuery仿淘宝CheckBox选中效果

效果预览:

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>

后语:

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

jQuery仿淘宝CheckBox选中效果

8 条用户评论。
  1. 评论 发表时间:11-30 12:35 1楼

    Firefox下虚线框很矬

    1. 评论 发表时间:11-30 12:41

      忘记加fous了...囧....看来还是不够专业

    2. 评论 发表时间:11-30 12:56

      ps.搞定~

  2. 评论 发表时间:11-30 18:46 2楼

    去演示版看了一下,还不错的哦

    1. 评论 发表时间:12-01 17:47

      很一般的,我的代码比较菜鸟,自己也在不断地学习

  3. 评论 发表时间:12-08 15:24 3楼

    那个测试图片换成美女养眼点

    1. 评论 发表时间:12-08 21:57

      @夜猫
      好意见,下次直接采纳

  4. 评论 发表时间:02-27 23:55 4楼

    呵呵,图片是够龊的。

添加新评论 »