메뉴 건너뛰기

?

단축키

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. jquery enter key event submit (jquery 엔터키 이벤트)

    Date2016.11.17 Views6908
    Read More
  2. Table을 DIV로 표현하기 (예제)

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

    Date2016.11.17 Views8230
    Read More
  4. jquery 글자 byte, 문자열 byte(바이트) 길이 체크하기 예제

    Date2016.11.17 Views8904
    Read More
  5. jquery 라디오버튼 선택 확인, 체크박스 선택 확인, 셀렉트박스 선택 확인

    Date2016.11.17 Views7206
    Read More
  6. jquery 디데이 계산 (D-day,Dday)

    Date2016.11.17 Views8865
    Read More
  7. zeroclipboard - 클립보드 복사하기(자바스크립트 클립보드 복사하기)

    Date2016.10.06 Views7238
    Read More
  8. load() 메소드

    Date2016.09.21 Views6487
    Read More
  9. getJSON() 함수

    Date2016.09.21 Views8440
    Read More
  10. 속성선택자를 이용해서 링크에 스타일 입히기

    Date2016.09.21 Views11866
    Read More
  11. getScript()

    Date2016.09.21 Views7195
    Read More
  12. 키보드 이벤트가 발생한 객체의 id값 알아내기

    Date2016.09.21 Views7588
    Read More
  13. POST 방식으로 인수를 전달하고 그 결과를 받아오기

    Date2016.09.21 Views9271
    Read More
  14. jQuery 예약어 $ 를 사용하지 못하는 경우 해결책 noConflict()

    Date2016.09.21 Views6740
    Read More
  15. FORM 객체 초기화 하기

    Date2016.09.21 Views7408
    Read More
  16. 동적으로 콤보(select)의 항목(option) 생성하기

    Date2016.09.21 Views14462
    Read More
  17. 다른 프레임에 있는 객채 참조하는 방법

    Date2016.09.21 Views6538
    Read More
  18. 화면 이동시에 레이어가 따라다니게 하기

    Date2016.09.21 Views7239
    Read More
  19. hover 메소드를 이용해서 메뉴 on, off를 구현

    Date2016.09.21 Views8541
    Read More
  20. 체크박스 또는 라디오 버튼의 체크여부 변경하기

    Date2016.09.21 Views6714
    Read More
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 Next
/ 9

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved