메뉴 건너뛰기

?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

라디오버튼, 체크박스, 셀렉트박스 값 선택하기 및 선택한 값을 가져오는 소스 입니다.


아래 예제 및 소스를 확인해 주시기 바랍니다. (결과확인 버튼 눌러보세요.)


============================================================



Test 책 종류: 소설 잡지 만화

할인 여부: 할인

결제수단:


============================================================


<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                 
                //초기화
                //라디오버튼
                $("input:radio[name='book_type'][value='magazine']").prop('checked', true);
                //체크박스
                $("input:checkbox[name='sale_yn']").prop("checked", true);
                //셀렉트박스
                $("select[name='payment_type']").val("card").attr("selected", "selected");
                 
                //결과확인
                $("#check").click(function(){
             
                    alert("책 종류: "+$("input:radio[name='book_type']:checked").val());
                    alert("할인 여부: "+$("input[name='sale_yn']").is(":checked"));
                    alert("결제수단: "+$("select[name='payment_type'] option:selected").val());
                     
                });
                 
            });
        </script>
    </head>
    <body>
        책 종류: 
        <input type="radio" name="book_type" value="novel"><span> 소설</span>
        <input type="radio" name="book_type" value="magazine"><span> 잡지</span>
        <input type="radio" name="book_type" value="comic"><span> 만화</span>
        <br>
        <br>
        할인 여부: 
        <input type="checkbox" name="sale_yn"> 할인
        <br>
        <br>
        결제수단: 
        <select name="payment_type">
            <option value="cash">현금</option>
            <option value="card">카드</option>
            <option value="point">포인트</option>
        </select>
        <br>
        <br>
        <button id="check">결과확인</button>
    </body>
</html>


  1. No Image 17Nov
    by
    2016/11/17 Views 6857 

    jquery enter key event submit (jquery 엔터키 이벤트)

  2. Table을 DIV로 표현하기 (예제)

  3. Html 색상표 모음, 색상코드표 (RGB), 이미지X, 복사 가능

  4. No Image 17Nov
    by
    2016/11/17 Views 8836 

    jquery 글자 byte, 문자열 byte(바이트) 길이 체크하기 예제

  5. No Image 17Nov
    by 조쉬
    2016/11/17 Views 7149 

    jquery 라디오버튼 선택 확인, 체크박스 선택 확인, 셀렉트박스 선택 확인

  6. jquery 디데이 계산 (D-day,Dday)

  7. No Image 06Oct
    by
    2016/10/06 Views 7181 

    zeroclipboard - 클립보드 복사하기(자바스크립트 클립보드 복사하기)

  8. No Image 21Sep
    by
    2016/09/21 Views 6412 

    load() 메소드

  9. No Image 21Sep
    by
    2016/09/21 Views 8379 

    getJSON() 함수

  10. No Image 21Sep
    by
    2016/09/21 Views 11539 

    속성선택자를 이용해서 링크에 스타일 입히기

  11. No Image 21Sep
    by
    2016/09/21 Views 7125 

    getScript()

  12. No Image 21Sep
    by
    2016/09/21 Views 7530 

    키보드 이벤트가 발생한 객체의 id값 알아내기

  13. No Image 21Sep
    by
    2016/09/21 Views 9202 

    POST 방식으로 인수를 전달하고 그 결과를 받아오기

  14. No Image 21Sep
    by
    2016/09/21 Views 6679 

    jQuery 예약어 $ 를 사용하지 못하는 경우 해결책 noConflict()

  15. No Image 21Sep
    by
    2016/09/21 Views 7346 

    FORM 객체 초기화 하기

  16. No Image 21Sep
    by
    2016/09/21 Views 14374 

    동적으로 콤보(select)의 항목(option) 생성하기

  17. No Image 21Sep
    by
    2016/09/21 Views 6471 

    다른 프레임에 있는 객채 참조하는 방법

  18. No Image 21Sep
    by
    2016/09/21 Views 7141 

    화면 이동시에 레이어가 따라다니게 하기

  19. hover 메소드를 이용해서 메뉴 on, off를 구현

  20. No Image 21Sep
    by
    2016/09/21 Views 6667 

    체크박스 또는 라디오 버튼의 체크여부 변경하기

Board Pagination Prev 1 ... 3 4 5 6 7 8 9 Next
/ 9

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved