有类似image checkbox插件么？

就是类似点击图片后，图片右下角出现一个勾号，再次点击勾号消失，可以多选，可以提交图片表单。我自己找了一下，都不是太满意。如果大家有用过类似插件的话，给我介绍下啊！不甚感激！谢谢！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

我以前见过一个jquery插件，UI也很好，但是记不得名字了，所以来问问大家！谢谢！
这个不需要什么插件，自己写一个。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#demo p { position:relative; }
</style><script type="text/javascript">
var img = new Image();
img.src = 'http://hafez.in/wp-content/themes/fal_ver1/images/Tasks.png';
img.style.position = 'absolute';
img.style.width = '16px';
img.style.height = '16px';window.onload = function() {
var obj = document.getElementById('demo').getElementsByTagName('img');
for (var i = 0; i < obj.length; i ++) {
if (obj[i].className == 'chk') {
obj[i].onclick = function() {
var chkFLAG = this.parentNode.getElementsByTagName('input')[0].value;
if (chkFLAG == 0) {
var o = img.cloneNode(false);
o.style.left = this.offsetLeft + this.width - 16 + 'px';
o.style.top = this.offsetTop + this.height - 16 + 'px';
this.parentNode.appendChild(o);
this.parentNode.getElementsByTagName('input')[0].value = '1';
}
else {
this.parentNode.removeChild(this.parentNode.getElementsByTagName('img')[1]);
this.parentNode.getElementsByTagName('input')[0].value = '0';
}
}
}
}
}
</script>
</head><body>
<form id="demo">
<p><img src="http://img3.cache.netease.com/www/logo/logo_png.png" class="chk" /><input type="hidden" value="0" /></p>
    <p><img src="http://img3.cache.netease.com/www/logo/logo_png.png" class="chk" /><input type="hidden" value="0" /></p>
    <p><img src="http://img3.cache.netease.com/www/logo/logo_png.png" class="chk" /><input type="hidden" value="0" /></p>
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
            ul {margin:0; padding:0; list-style:none; }

            ul {
                margin:200px;
                font-family:arial;
            }
            li {
                position:relative;
                float:left;
                margin-right:10px;
                width:36px; height:36px;
                background:url(http://i.vanclimg.com/joinimages.ashx?d=/36/product/&href=0/1/7/017364/76590,0/1/7/017364/16010,0/1/7/017364/05720,0/1/7/017363/95720,0/1/7/017363/75420,0/1/7/017364/66590,0/1/7/017364/56300,0/1/7/017364/46300,0/1/7/017364/36300,0/1/7/017364/26010,0/1/7/017363/85420,0/1/7/017363/65420) no-repeat;
                border:1px solid #ddd;
                cursor:pointer;
            }
            .pro2 {
                background-position:0 -72px;
            }
            .pro3 {
                background-position:0 -144px;
            }
            li span {
                display:none;
                position:absolute; right:0; bottom:0;
                width:14px; height:13px; overflow:hidden;
                background:url(http://i4.vanclimg.com/others/2012/4/25/sprites1.png) no-repeat -1151px 0;
            }
            .cur {
                border-color:#a10;
            }
        </style>
    </head>
    <body>
        <ul id="pro">
            <li title="商品1"><span></span></li>
            <li title="商品2" class="pro2"><span></span></li>
            <li title="商品3" class="pro3"><span></span></li>
        </ul>
        <input id="text" />
        <script>
            ;(function(){
                var $ = function(id){
                    return document.getElementById(id);
                };
                var $t = function(tag, cot){
                    cot = cot || document;
                    return cot.getElementsByTagName(tag);
                };
                var objs = $t('li', $('pro'));
                var cur;
                var text = $('text');
                for(var i = 0, len = objs.length; i < len; i++){
                    objs[i].onclick = function(){
                        this.className += ' cur';
                        $t('span', this)[0].style.display = 'block';
                        text.value = this.title;
                        if(cur){
                            cur.className = cur.className.replace(' cur', '');
                            $t('span', cur)[0].style.display = 'none';
                        }
                        cur = this;
                    }
                }
            })();
        </script>
    </body>
</html>
其实就是把值传给 input 后台获取 input的值保存就可以了。
<input id="text" />
至于楼主说的ui可以参考下http://www.open-open.com/news/view/10b207a