메뉴 건너뛰기

조회 수 6347 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
<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>



List of Articles
번호 제목 날짜 조회 수
119 jquery 팝업 차단 없이 띄우기 2019.03.05 2863
118 [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법 2019.03.05 1129
117 jQuery 기초 (Query link url / download (위치, 사용법) // p태그, id, class 접근 / 일반태그 가져오기 / 클릭시 값) 2019.01.16 1079
116 jQuery 기초 (클릭하면 이미지 변경 / mouseover시 애니메이션 효과주기 / 동적으로 변경) 2019.01.16 1506
115 jQuery 기초 (focus, blur, toggle / mouseenter, mouseleave, mousedown, mouseup, hover) 2019.01.16 1261
114 jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시 데이터 삽입) file 2019.01.16 1181
113 jQuery 기초 (JQuery - text(), val(), html(), attr(), prop()) 2019.01.16 1055
112 jQuery 기초 (attr()로 두가지 동시에 접근 / 변경) 2019.01.16 1119
111 jQuery 기초 (텍스트 추가 (createElement, createTextNode, appendChild), (html, javascript, jquery) file 2019.01.16 1411
110 jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty) file 2019.01.16 1084
109 jQuery 기초 (txt 파일 가져오기 (load) , 클릭시에 배경색을 변경(json)) file 2019.01.16 3225
108 Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort)) file 2019.01.16 2192
107 jQuery 기초 (jQuery 달력 (datepicker)) file 2019.01.16 1321
106 jQuery 기초 (Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제) (HTML) / POP UP 버젼) file 2019.01.16 1349
105 .removeAttr() : 특정 속성을 제거 2019.01.16 1021
104 .attr() : 태그의 속성 값을 읽어오거나 속성을 추가및 재설정 2019.01.16 962
103 popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인 file 2019.01.16 1234
102 jQuery Plugin : Slider file 2019.01.10 1113
101 jQuery datepicker 팝업창 사이즈 바꾸기 file 2019.01.10 1499
100 jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow) file 2019.01.10 1093
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved