jquery 控制图片实现checkbox复选框效果

<include file="Public:header"/> 
<script type="text/javascript">
jQuery(document).ready(function(){
//返回到当前页面、刷新当前页面时，以前选中的复选框所对应的图片事件
jQuery('input[type=checkbox]:checked').each(function(){
jQuery(this).nextAll('.checkbox_check').show();
jQuery(this).nextAll('.checkbox_none').hide();
});

//jQuery("input[type=checkbox]").attr("checked",false); 

//服务选择页面提交事件
jQuery('.o_btn_submit').click(function(){
var data = new Array();
//var data = new Array();
jQuery('input[type=checkbox]:checked').each(function(){
data.push(jQuery(this).val());
});
if(data == ""){
alert('请选择需要的服务');
return false;
}

//location.href = "{lanrain::U('Yuyue/order',array('token'=>$_GET['token'],'data' =>'"+data+"','wecha_id'=>$_GET['wecha_id']))}";
var token = jQuery('#token').val();
var wecha_id = jQuery('#wecha_id').val();
location.href = "index.php?g=Wap&m=Yuyue&a=order&token="+token+"&data="+data+"&wecha_id="+wecha_id;
});
//checkbox单选按钮未选中事件
jQuery('.checkbox_none').click(function(){
jQuery(this).prevAll('#service_checkbox').prop('checked',true);
jQuery(this).hide();
jQuery(this).next('.checkbox_check').show();

});
//checkbox单选按钮选中事件
jQuery('.checkbox_check').click(function(){
jQuery(this).prevAll('#service_checkbox').prop('checked',false);
jQuery(this).hide();
jQuery(this).prev('.checkbox_none').show();
})



})
</script>
<style type="text/css">
/********************2014.6.4预约*****************************************/
.checkbox_none{

}
.checkbox_check{

}


</style>
  <div class='serviceList' >
<section class="f_list i_list" >
<ul class="clearfix" id="f_list">
<volist name="list" id="list"> 
<li>
<div class="f_list_l">
<span>
<img src="{lanrain:$list.service_picurl}" />
<h3>{lanrain:$list.service_name}</h3>
<p class="tui_price ts2">价格：￥{lanrain:$list.service_price}</p>
</span><br>
<span style="float: left;">简介：{lanrain:$list.service_info}</span>
</div>
<div class="f_list_r">
<p>
<input id="service_checkbox" name='service_checkbox' value="{lanrain:$list.id}"  type='checkbox' style="display: none;">
<img src='{lanrain::RES}/images/yuyue/checkboxNone.jpg' class='checkbox_none' style='padding-left:15px;float:left;width:20px;height:20px;'>
<img src='{lanrain::RES}/images/yuyue/checkboxCheck.jpg' class='checkbox_check' style='padding-left:15px;float:left;width:20px;height:20px;display: none;' >
<strong>预约</strong>
</p>

</div>
</li>
</volist>
</ul>
</section>
<div style='margin-bottom:60px;'>
<input type='button' class='o_btn_submit ts1' style='width:100%;height:35px;'  value="提交">
</div>
<input type='hidden' id='token' name='token' value="{lanrain::$_GET['token']}">
<input type='hidden' id='wecha_id' name='wecha_id' value="{lanrain::$_GET['wecha_id']}">
</div>



</body>

</html>

style{}中未写具体样式，而写在标签的style中，是因为css优先级的问题，也就是样式冲突，写在css文件中也未解决，为了节省时间，暂时写了标签的style中