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

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

未选中状态:

以lable实现的checkBox如何切换背景和显示隐藏关联区域_第1张图片

已选中状态:


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

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

好了,准备一下把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的代码:

        
   ¥ 0
可用0粮票

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

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

最后就是主菜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 这里的。





你可能感兴趣的:(DIV+CSS,JQuery,JavaScript)