메뉴 건너뛰기

?

단축키

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>


List of Articles
번호 제목 날짜 조회 수
119 jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow) file 2019.01.10 1093
118 jQuery Plugin : Slider file 2019.01.10 1113
117 jQuery 기초 (attr()로 두가지 동시에 접근 / 변경) 2019.01.16 1119
116 attr() - style의 특정 속성만 바꾸기 2021.03.26 1125
115 [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법 2019.03.05 1129
114 jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시 데이터 삽입) file 2019.01.16 1181
113 jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 2019.01.10 1211
112 popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인 file 2019.01.16 1235
111 jQuery 기초 (focus, blur, toggle / mouseenter, mouseleave, mousedown, mouseup, hover) 2019.01.16 1268
110 터치 디바이스 분기처리 2018.11.07 1278
109 Hide pager if bxslider has only 1 slide 2018.11.07 1296
108 getElementsByClassName 을 IE8 이하에서 동작하게 하는 코드 2018.11.07 1297
107 Magnific popup conflict with "jquery.nicescroll" file 2018.11.07 1315
106 jQuery 기초 (jQuery 달력 (datepicker)) file 2019.01.16 1321
105 jQuery 로 탭메뉴 보였다 안보였다 맹글기 2019.01.10 1329
104 jQuery 기초 (Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제) (HTML) / POP UP 버젼) file 2019.01.16 1349
103 selectbox multiple 선택한 값들 submit 해서 받기 2021.03.26 1364
102 3D Perspective Carousel with jQuery and CSS3 - CSSSlider 2018.11.07 1388
101 비활성화 된 라디오버튼 클릭 시 경고창 생성 2018.11.07 1396
100 iframe height auto resize 2018.11.07 1403
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved