[checkbox] 체크박스 on off checked

HTML

<label class="switch">
    <input type="checkbox" id="program-chk" checked>
    <span class="slider"><span class="on">ON</span><span class="off">OFF</span></span>
</label>

 

CSS

#window-pop .title-wrap.pro-tit{margin-bottom: 20px;}
.switch{overflow: hidden;display: inline-block;position: relative;float: right;width: 72px;height: 32px;margin-top: -4px;}
.switch input{opacity: 0;width: 0;height: 0;}
.slider{position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #555555;border-radius: 50px;-webkit-transition: .4s;transition: .4s;}
.slider > span{display: inline-block;padding: 9px 12px;font-size: 14px;font-weight: 400;color: #fff;line-height: 1em;}
.slider > span.off{display: block;margin-left: 22px;}
.slider > span.on{display: none;}
.slider:before{position: absolute;content: "";height: 24px;width: 26px;left: 4px;bottom: 4px;background-color: #fff;border-radius: 50%;-webkit-transition: .4s;transition: .4s;}
.title-wrap input:checked + .slider{background-color: #005aae;}
.title-wrap input:checked + .slider > .on{display: block;padding: 9px 12px;font-size: 14px;font-weight: 400;color: #fff;}
.title-wrap input:focus + .slider{box-shadow: 0 0 1px #005aae;}
.title-wrap input:checked + .slider:before{-webkit-transform: translateX(36px);-ms-transform: translateX(36px);transform: translateX(36px);}

 

jQuery

function onOff(){
    $('#program-chk').on('click',function(e){
    	if($(this).prop('checked')){
            $('.program-table-wrap').stop().slideDown(200);
        }else{
            $('.program-table-wrap').stop().slideUp(200);
        }
	});
}