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

最新推荐文章于 2022-10-31 15:54:07 发布

原创最新推荐文章于 2022-10-31 15:54:07 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 3 个专栏收录

15 篇文章

订阅专栏

DIV+CSS

9 篇文章

订阅专栏

JQuery

3 篇文章

订阅专栏

本文介绍如何使用纯CSS来实现类似CheckBox的功能，通过切换背景图片来模拟选中与未选中的状态，并结合HTML与JS完成粮票抵扣现金的交互过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

未选中状态：

已选中状态：

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

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