Web story/Javascript

라디오 버튼 내용 제어하기

JKJ1004 2008. 8. 27. 14:39

<script>
       var i=1; // i값은 본래 1이다.

       for(i=1;i<4;i++){ // i는 1보다 같거나 크고 4보다 작다.

        function order(i){ // 버튼 클릭시 함수
        
         if (document.getElementById('order_view0'+i).style.display=="none"){ //눌린 버튼에 해당하는 id의 디스플레이 상태가 none이라면
          document.getElementById('order_view0'+i).style.display=""; // 보이도록 설정한다.
         };
       
         for(k=1;k<4;k++){ // k는 1보다 크거나 같고 4보다 작다
         
          if(k!=i){
        document.getElementById('order_view0'+k).style.display="none"; //i값과 틀린 id는 디스플레이를 none;으로 설정한다.
          };
         
         };
        
        };

       };

   </script>


<div class="info_p c_54">
  <table width="580">
  <tr>
    <td class="info_view">결제방법</td>
    <td>
      <input type="radio" class="radio" name="order" value="1" onclick="javascript:order(1);" checked>계좌이체 &nbsp; &nbsp;
      <input type="radio" class="radio" name="order" value="2" onclick="javascript:order(2);">신용카드 &nbsp; &nbsp;
      <input type="radio" class="radio" name="order" value="3" onclick="javascript:order(3);">무통장입금
    </td>
  </tr>
  <tr><td colspan="2"><hr class="dotted"></td></tr>
  </table>

  <div id="order_view01" style="display:block;">
    <table>
    <tr>
      <td class="info_view2">계좌이체 <br />지불정보</td>
      <td colspan="3">

        <table>
        <tr>
          <td class="info_view3">금액 :</td>
          <td class="c_00 pdnt2"><span class="b txt03">60,500</span> 원</td>
        </tr>
        <tr>
          <td class="info_view3">은행 :</td>
          <td class="c_00">
            <select>
            <option>선택하세요</option>
            <option>------------</option>
            <option>아무은행1</option>
            <option>아무은행2</option>
            <option>아무은행3</option>
            </select>
          </td>
        </tr>
        </table>
        <table>
        <tr>
          <td class="info_view3">현금영수증 발급 :</td>
          <td>
            <input type="radio" class="radio" name="sign">예 &nbsp; &nbsp;
            <input type="radio" class="radio" name="sign">아니오 &nbsp; &nbsp;
            <select>
            <option>소득공제용</option>
            <option>증빙</option>
            </select>
          </td>
        </tr>
        </table>
        <table>
        <tr>
          <td class="info_view3" colspan="1">
            주민등록번호 :
            <input type="text" size="20"> <span style="color:#848484;">(“-” 없이 13자리 입력)</span>
          </td>
        </tr>
        </table>

      </td>
    </tr>
    <tr><td colspan="4"><hr class="dotted"></hr></td></tr>
    <tr>
      <td class="info_view2">계좌이체<br />주의사항</td>
      <td colspan="3">
        <div class="info_view4">우리은행, 신한은행(구 조흥은행 포함), 외환은행, 국민은행, 농협, 기업은행, 우체국, 제일은행<br /> 계좌를 보유하고 있어야 합니다.</div>
      </td>
    </tr>
    <tr>
      <td class="info_view2">계좌이체<br />이용방법</td>
      <td colspan="3">
        <div class="info_view4">아래 정보(은행, 비밀번호)를 입력하신 후 주문완료를 누르면 주문완료 페이지로 넘어갑니다.</div>
      </td>
    </tr>
    </table>
  </div>

  <div id="order_view02" style="display:none;">
    <table>
    <tr>
      <td class="info_view2">신용카드 결제 <br />지불정보</td>
      <td colspan="3">

        <table>
        <tr>
          <td class="info_view3">금액 :</td>
          <td class="c_00 pdnt2"><span class="b txt03">60,500</span> 원</td>
        </tr>
        <tr>
          <td class="info_view3">카드종류 :</td>
          <td class="c_00">
            <select>
            <option>선택하세요</option>
            <option>------------</option>
            <option>아무카드1</option>
            <option>아무카드2</option>
            <option>아무카드3</option>
            </select>
          </td>
        </tr>
        </table>

      </td>
    </tr>
    <tr><td colspan="4"><hr class="dotted"></hr></td></tr>
    <tr>
      <td class="info_view2">신용카드 결제<br />주의사항</td>
      <td colspan="3">
        <div class="info_view4">해외에서 발급된 카드는 사용하실 수 없습니다.</div>
      </td>
    </tr>
    </table>
  </div>

  <div id="order_view03" style="display:none;">
    <table>
    <tr>
      <td class="info_view2">무통장입금<br />지불정보</td>
      <td colspan="3">

        <table>
        <tr>
          <td class="info_view3">금액 :</td>
          <td class="c_00 pdnt2"><span class="b txt03">60,500</span> 원</td>
        </tr>
        <tr>
          <td class="info_view3">입금자명 :</td>
          <td class="c_00"><input type="text" size="15"></td>
        </tr>
        <tr>
          <td class="info_view3">무통장 입금 계좌 : </td>
          <td class="c_00">예금주 - 개똥이네</td>
        </tr>
        <tr>
          <td class="info_view3">입금은행 :</td>
          <td class="c_00">
            <select>
            <option>선택하세요</option>
            <option>------------</option>
            <option>아무은행1</option>
            <option>아무은행2</option>
            <option>아무은행3</option>
            </select>
          </td>
        </tr>
        </table>

      </td>
    </tr>
    <tr><td colspan="4"><hr class="dotted"></hr></td></tr>
    <tr>
      <td class="info_view2">무통장입금<br />주의사항</td>
      <td colspan="3">
        <div class="info_view4">모든 상품의 배송은 입금 확인후 이루어집니다!! <br />(회원님이 입금을 빨리 하실수록 상품을 빨리 받아보실 수 있습니다.)</div>
        <div class="info_view4">주문에 한정수량으로 판매하는 제품이 한가지라도 포함된 경우에는 주문된 다음날<br />(토요일, 공휴일 제외) 오후 3시까지 입금을 안 하시면 본 주문은 자동 취소됩니다.</div>
        <div class="info_view4">일반적인 무통장입금 주문의 경우는 주문일 기준 2일 경과(토요일, 공휴일 제외)할 때까지 입금을 안 하시면 자동 취소됩니다.</div>
      </td>
    </tr>
    </table>
  </div>

반응형