메뉴 건너뛰기

?

단축키

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
번호 제목 날짜 조회 수
139 간단한 스크롤 따라 움직이는 메뉴 만들기 2021.03.26 727
138 JS 타이머 샘플 2019.06.04 745
137 새창(자식창) 제어하기, 새창 POST방식으로 값 넘기기 2021.03.26 787
136 JS 날짜 자료 비교 2019.06.04 788
135 DateTimepicker ( Timepicker + Datepicker ) file 2021.03.26 788
134 체크박스 전체선택/해지 2019.06.04 790
133 //ex)텍스트 박스 포커스 활성, 비활성 이벤트 2019.06.04 812
132 click event scroll 2021.03.31 827
131 정규식, 한글 못쓰게 하기, replace all 2021.03.26 844
130 jQuery 일반적 팁 2019.06.04 853
129 텍스트 필드에 기본글이 마우스 클릭하면 지워지게 하기 폼필드 소스 내에 아래 태그를 삽입한다. 2019.06.04 867
128 jQuery 로 탭메뉴 2019.01.10 938
127 .attr() : 태그의 속성 값을 읽어오거나 속성을 추가및 재설정 2019.01.16 962
126 이미지 확대/축소 2020.11.25 974
125 .removeAttr() : 특정 속성을 제거 2019.01.16 1021
124 jQuery 로 원하는 갯수만큼 checkbox 선택하기 2019.01.10 1022
123 jQuery 기초 (JQuery - text(), val(), html(), attr(), prop()) 2019.01.16 1055
122 jQuery 기초 (Query link url / download (위치, 사용법) // p태그, id, class 접근 / 일반태그 가져오기 / 클릭시 값) 2019.01.16 1079
121 jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty) file 2019.01.16 1084
120 jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 2019.01.10 1085
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved