상세 컨텐츠

본문 제목

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

JavaScript & HTML

by husks 2016. 9. 27. 14:47

본문

반응형



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


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


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



Test 책 종류: 소설 잡지 만화

할인 여부: 할인

결제수단:


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<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>



* 추가


값으로 선택

$("input:radio[name='book_type']:input[value='novel']'").attr("checked", true);


반응형
저작자표시 비영리 변경금지

'JavaScript & HTML' 카테고리의 다른 글

javascript 개행 replace (javascript replace newline to br)  (0) 2017.03.17
jquery 디데이 계산 (D-day, Dday)  (4) 2016.10.11
input type file multiple list (파일 업로드 리스트 확인)  (0) 2016.09.19
jquery 글자 byte, 문자열 byte(바이트) 길이 체크하기 예제  (1) 2016.09.07
Html 색상표 모음, 색상코드표 (RGB), 이미지X, 복사 가능  (0) 2016.09.07

관련글 더보기

댓글 영역

티스토리툴바