以lable实现的checkBox如何切换背景和显示隐藏关联区域

来源：互联网发布：iptables内网端口转发编辑：程序博客网时间：2024/05/29 12:50

应用场景：在某商城金钱结算的时候，可以用积分抵扣部份现金。效果图如下，分别为未选中状态（默认）和已选中状态。

未选中状态：

已选中状态：

---------------------------------------------------------------------------------------------------------------------------------------------

好了，准备一下把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这里的。

0 0