메뉴 건너뛰기

조회 수 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>



  1. jquery 팝업 차단 없이 띄우기

    Date2019.03.05 Views2863
    Read More
  2. [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법

    Date2019.03.05 Views1129
    Read More
  3. jQuery 기초 (Query link url / download (위치, 사용법) // p태그, id, class 접근 / 일반태그 가져오기 / 클릭시 값)

    Date2019.01.16 Views1079
    Read More
  4. jQuery 기초 (클릭하면 이미지 변경 / mouseover시 애니메이션 효과주기 / 동적으로 변경)

    Date2019.01.16 Views1506
    Read More
  5. jQuery 기초 (focus, blur, toggle / mouseenter, mouseleave, mousedown, mouseup, hover)

    Date2019.01.16 Views1261
    Read More
  6. jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시 데이터 삽입)

    Date2019.01.16 Views1181
    Read More
  7. jQuery 기초 (JQuery - text(), val(), html(), attr(), prop())

    Date2019.01.16 Views1055
    Read More
  8. jQuery 기초 (attr()로 두가지 동시에 접근 / 변경)

    Date2019.01.16 Views1119
    Read More
  9. jQuery 기초 (텍스트 추가 (createElement, createTextNode, appendChild), (html, javascript, jquery)

    Date2019.01.16 Views1411
    Read More
  10. jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty)

    Date2019.01.16 Views1084
    Read More
  11. jQuery 기초 (txt 파일 가져오기 (load) , 클릭시에 배경색을 변경(json))

    Date2019.01.16 Views3225
    Read More
  12. Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort))

    Date2019.01.16 Views2192
    Read More
  13. jQuery 기초 (jQuery 달력 (datepicker))

    Date2019.01.16 Views1321
    Read More
  14. jQuery 기초 (Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제) (HTML) / POP UP 버젼)

    Date2019.01.16 Views1349
    Read More
  15. .removeAttr() : 특정 속성을 제거

    Date2019.01.16 Views1021
    Read More
  16. .attr() : 태그의 속성 값을 읽어오거나 속성을 추가및 재설정

    Date2019.01.16 Views962
    Read More
  17. popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인

    Date2019.01.16 Views1234
    Read More
  18. jQuery Plugin : Slider

    Date2019.01.10 Views1113
    Read More
  19. jQuery datepicker 팝업창 사이즈 바꾸기

    Date2019.01.10 Views1499
    Read More
  20. jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow)

    Date2019.01.10 Views1093
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved