<style type="text/css"> .eventWrap div.inNumber{margin-bottom:30px;} .eventWrap div.inNumber:after{content:'';display:block;clear:both;} .eventWrap div.inNumber input{float:left;width:616px;height:73px;line-height:73px;margin-right:20px;padding:0;border:1px solid #cfcfcf;background:#f2f2f2;text-align:center;color:#444343;font-size:24px;} .eventWrap div.inNumber div.selectbox {float:left;position: relative;width: 277px;height:73px;line-height:73px;border: 1px solid #cfcfcf;background:#fbfbfb url('./images/sel_off.gif') no-repeat 219px 50%;;z-index: 1;font-size:24px;} .eventWrap div.inNumber div.selectbox label{position: absolute; top: 1px;left: 30px;width:243px;height:73px;line-height:73px; color: #999;z-index: -1;} .eventWrap div.inNumber div.selectbox select {width: 100%;height:73px;line-height:73px;font-family: inherit;border: 0;opacity: 0;filter:alpha(opacity=0);-webkit-appearance: none;-moz-appearance: none;appearance: none;} .eventWrap .smsPoint{width:912px;padding:105px 0 32px 0;margin-bottom:20px;border:3px solid #f92828;background:url('./images/tit_point_save.gif') no-repeat 0 0;} .eventWrap .smsPoint .txtSms{text-align:center;font-size:18px;line-height:26px;margin-bottom:26px;} .eventWrap .smsPoint .smsChk{position:relative;text-align:center;} .eventWrap .smsPoint .smsChk label{display:inline-block;padding:0 0 0 44px;height:33px;line-height:33px;font-size:25px;color:#000;background:url('./images/bg_checkbox.png') no-repeat 0 0;} .eventWrap .smsPoint .smsChk label.on{background-position:0 100%;} .eventWrap .smsPoint .smsChk input{position:absolute;top:0px;left:0px;width:315px;height:33px;opacity: 0;filter:alpha(opacity=0);} </style>
<div class="inNumber"> <input type="text" id="inNumber" name="" value="인증번호 8자리 입력(-제외)" /> <div class="selectbox"> <label for="labelSel">적립 받을 달 선택</label> <select id="labelSel"> <option>적립 받을 달 선택</option> <option>12월</option> <option>11월</option> <option>10월</option> <option>9월</option> <option>8월</option> </select> </div> </div> <div class="smsPoint"> <p class="txtSms">고객님이 잊지 않으시도록 선택하신 달에 고객님께 적립금 지급을 알려드립니다. <br />SMS 수신동의를 해주시기 바랍니다.</p> <p class="smsChk"> <label for="smsAgree">SMS 안내받기 (수신동의)</label> <input type="checkbox" id="smsAgree" class="inCheck" /> </p> </div> <p class="btnC mb55"><a href="#"><img src="./images/btn_point_save.gif" alt="적립금 받기" /></a></p> <script type="text/javascript"> $(document).ready(function() { $('#inNumber').on('focus', function(){ $(this).val(''); }); var selectTarget = $('.selectbox select'); selectTarget.change(function(){ var select_name = $(this).children('option:selected').text(); $(this).siblings('label').text(select_name); }); $('.smsChk input').on('click', function(){ var $this = $(this).parent().find('label'); if($('#smsAgree').is(':checked')){ $this.addClass('on'); //console.log(0); //console.log($('#smsAgree').is(':checked')); } else { $this.removeClass('on'); //console.log(1); //console.log($('#smsAgree').is(':checked')); } }); }); </script>