27. (jquery/제이쿼리) 그룹 라디오 radio 버튼 선택 번호 확인 실시 - length , val 폼 양식 설정 값 확인

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : jquery

---

[소스 코드]

​

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->    
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 



    <!-- 내부 JS 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 
    	2. $(":input:radio[name='qna_1_group']").length : qna_1_group 그룹으로 설정된 라디오 개수를 확인합니다
    	3. $(":input:radio[name='qna_1_group']:checked").val() : 선택된 라디오 버튼 value 값을 확인합니다
    	4. val : val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드입니다
    	5. 참고 : 선택된 라디오 버튼이 없을 경우 >> undefined 을 반환합니다    	
    	*/
   	
    	
    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log("");
    	};


    	/* [라디오 버튼 선택 확인 함수 정의] */
    	function checkRadioSelect(){
    		console.log("");
    		console.log("[checkRadioSelect] : [start]");		
    		console.log("");

    		// body 소스코드 
    		/*
    		[name 부분 이름을 동일하게 설정 시 그룹이 됩니다]
    		<input type="radio" name="qna_1_group" value="1"/>
    		<input type="radio" name="qna_1_group" value="2"/>
    		<input type="radio" name="qna_1_group" value="3"/>
    		*/

    		// 그룹 라디오 버튼 개수 확인 실시
    		var checkLen = $(":input:radio[name='qna_1_group']").length;
    		console.log("");
    		console.log("[checkRadioSelect] : [check group count]");		
    		console.log("[group count] : " + checkLen);		
    		console.log("");

    		// 그룹 라디오 버튼 중 어떤 것이 선택 되었는지 확인 [radio value 값 확인]    		
    		var checkNum = $(":input:radio[name='qna_1_group']:checked").val();
    		console.log("");
    		console.log("[checkRadioSelect] : [check number]");		
    		console.log("[check] : " + checkNum);		
    		console.log("");
    	};
    	
    </script>

---

[결과 출력]

​

​

---

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 브라우저 로드 완료 상태를 나타냅니다

2. $(":input:radio[name='qna_1_group']").length : qna_1_group 그룹으로 설정된 라디오 개수를 확인합니다

3. $(":input:radio[name='qna_1_group']:checked").val() : 선택된 라디오 버튼 value 값을 확인합니다

4. val : val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드입니다

5. 참고 : 선택된 라디오 버튼이 없을 경우 >> undefined 을 반환합니다

*/

---