jquery模拟checkbox

HTML代码：

<div class="box">
			<span class="checkbox_item">
				<input type="checkbox" />
				<label class="check_label on">
		            <i class="checkbox_icon "></i>
		            <em class="checkbox_text">项目一</em>
	            </label>
			</span>
			<span class="checkbox_item">
				<input type="checkbox" />
	            <label class="check_label">
		            <i class="checkbox_icon"></i>
		            <span class="checkbox_text">项目二</span>
	            </label>
			</span>
            <span class="checkbox_item">
            	<input type="checkbox" />
	            <label class="check_label">
		            <i class="checkbox_icon"></i>
		            <span class="checkbox_text">项目三</span>
	            </label>
            </span>
        </div>
        <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="js/checkbox.js" type="text/javascript"></script>
        <script type="text/javascript">
			$(".check_label").checkbox();
        </script>

CSS代码：

.checkbox_item input{position:absolute;top:-9999px;left:-9999px;}
.checkbox_icon{display:block;float:left;margin-right:5px;width:16px;height:16px;background:url(../images/checkbox_icon.png) 0 0;}
.check_label.on .checkbox_icon{background-position:-16px 0;}

checkbox.js代码：

;(function($){
	$.fn.extend({
		checkbox : function(){
			return this.each(function(){
				var $this = $(this);
				if($this.hasClass("on")){
    				$this.siblings("input").prop("checked","checked");
    			}else{
    				$this.siblings("input").removeAttr("checked");
    			}
    			$this.on("click",function(){
					if($this.hasClass("on")){
						$this.siblings("input").removeAttr("checked");
						$this.removeClass("on");
					}else{
						$this.siblings("input").prop("checked","checked");
						$this.addClass("on");
					}
				});	
			});
		}
	});	
})(jQuery);

转载于:https://my.oschina.net/u/2417339/blog/869103