메뉴 건너뛰기

?

단축키

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
번호 제목 날짜 조회 수
39 JS 첵박스 샘플 2019.06.04 694
38 모달 띄우는 코드 2021.03.25 657
37 jQuery - checkbox 전체 선택, 해제 기능 및 단일 체크박스가 해제되었을때 전체 선택 해제 하기 file 2021.03.09 613
36 간단한 마우스 포인터 따라 다니기 2021.03.26 594
35 jQuery - ajax xhr을 활용한 파일 업로드 진행 상태 확인하기 file 2021.03.09 586
34 jQuery - 클릭이벤트 동적 처리하기($("").click(), on('click') 차이) file 2021.03.09 579
33 SELECTBOX MULTIPLE 검색하기 2021.03.26 568
32 jQuery - radio, checkBox값 가져오기, 선택하기, 제어 등 file 2021.03.09 543
31 ajax 동기화 처리하기 2021.03.25 416
30 Cesium에서 canvas 화면 center 지점의 좌표 취득 2021.03.25 368
29 jQuery - 드래그, 리사이즈 이벤트에 따른 영역 침범 막기 file 2021.03.09 363
28 목록의 체크 선택/해제에 따라 [전체선택] 체크박스를 체크하거나 해제하기 2021.03.25 329
27 최초 접속시 css와 script가 로딩되지 않을때 2021.03.25 322
26 다중 select 2021.03.31 316
25 click에 따른 마우스 휠 on off 2021.03.31 299
24 jQuery - 드래그앤드롭(DragAndDrop)을 통한 파일 업로드 file 2021.03.09 291
23 fadeIn() , fadeOut() 을 이용한 간단한 자동 그림 전환 2021.03.26 285
22 항상 최신버전으로 사용하기 2021.03.26 284
21 기본 동작 막기 2021.03.25 284
20 javascript, jQuery에서 루프 돌리기 예 (for, forEach, each) 2021.03.25 276
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 Next
/ 9

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved