메뉴 건너뛰기

?

단축키

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 10Jan
    by
    2019/01/10 Views 938 

    jQuery 로 탭메뉴

  2. No Image 10Jan
    by
    2019/01/10 Views 1022 

    jQuery 로 원하는 갯수만큼 checkbox 선택하기

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

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

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

  5. No Image 21May
    by
    2019/05/21 Views 3102 

    jquery 드래그 앤 드롭 파일 업로드

  6. No Image 17Nov
    by
    2016/11/17 Views 6511 

    jquery 뒤로가기

  7. No Image 17Nov
    by
    2016/11/17 Views 10066 

    jQuery 날짜 비교 (날짜비교)

  8. jQuery 기초 (텍스트 추가 (createElement, createTextNode, appendChild), (html, javascript, jquery)

  9. No Image 16Jan
    by
    2019/01/16 Views 1507 

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

  10. jQuery 기초 (txt 파일 가져오기 (load) , 클릭시에 배경색을 변경(json))

  11. jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시 데이터 삽입)

  12. No Image 16Jan
    by
    2019/01/16 Views 1079 

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

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

  14. jQuery 기초 (jQuery 달력 (datepicker))

  15. No Image 16Jan
    by
    2019/01/16 Views 1055 

    jQuery 기초 (JQuery - text(), val(), html(), attr(), prop())

  16. No Image 16Jan
    by
    2019/01/16 Views 1268 

    jQuery 기초 (focus, blur, toggle / mouseenter, mouseleave, mousedown, mouseup, hover)

  17. No Image 16Jan
    by
    2019/01/16 Views 1119 

    jQuery 기초 (attr()로 두가지 동시에 접근 / 변경)

  18. jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty)

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

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

  20. No Image 17Nov
    by
    2016/11/17 Views 8547 

    jQuery tr 추가 (입력창 추가), jQuery 테이블 행 추가/삭제, selector last name

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

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved