应用场景:在某商城金钱结算的时候,可以用积分抵扣部份现金。效果图如下,分别为未选中状态(默认)和已选中状态。
未选中状态:
已选中状态:
---------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------
好了,准备一下把lable标签伪装成checkBox的css样式:
.checkedInLable{background-position: left center; background-image: url(../images/checked_is.png); background-repeat: no-repeat; background-size: 25px; padding-left:35px;}
.unCheckedInLable{background-position: left center; background-image: url(../images/checked_un.png); background-repeat: no-repeat; background-size: 25px; padding-left:35px;}
上面两个样式的区别其实只有background-image不同而已哈。
---------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------
然后是HTML的代码: <div id="ticketInfo">
<input id="payTicket" type="text" style=" width:50px;width: 50px;border: 1px solid #693;border-radius: 5px;vertical-align: middle;line-height: 25px;"/>
¥
<span id="ticketWorth">0</span><br/>
<span>可用<span id="ownTicket">0</span>粮票</span>
</div>
<div style="font-size:20px; margin-top:20px;" >
<label id="lblUseTicket" for="chbUseTicket" class="unCheckedInLable">
<input id="chbUseTicket" type="checkbox" />
使用粮票</label>
</div>
---------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------
最后就是主菜JS代码了:$(document).ready(function(){
$("#chbUseTicket").change(function(){
if($(this).is(':checked')){
alert("选中");
}else{
alert("取消选中");
}
//显示/隐藏DIV的同时,修改lable的样式
$('#ticketInfo').toggle("normal", function(){
$('#lblUseTicket').toggleClass('checkedInLable');
$('#lblUseTicket').toggleClass('unCheckedInLable');
});
});
});
---------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------
咳咳,其实这个呢,是参考了stackoverflowp 这里的。