[Javascript/Jquery] 라디오버튼(radio button) 사용법 정리 (라디오버튼 선택/ 라디오버튼 해제/ 라디오버튼 선택값 가져

 

라디오 버튼

라디오버튼의 기본 폼과 선택, 해제, 선택된값 불러오기 등을 정리해보겠습니다.

 

1) 라디오버튼 기본 폼

 

---

<div>
   <input type="radio" id="one"  name="number" value="1" checked>One
   <input type="radio" id="two" name="number" value="2">Two
   <input type="radio" id="three" name="number" value="3">Three
   <input type="radio" id="fore" name="number" value="4">Four
</div>

위의 코드는 라디오 버튼의 기본 폼과 코드 실행 결과입니다.

 

<input> 태그에 type값을 radio로 설정해주면 라디오버튼이 생성되게 됩니다.

 

그 다음 name값을 지정해주고 value값을 지정해주어 radio버튼을 컨트롤 해줄 수 있습니다.

 

2) 라디오 버튼 선택/해제

이제 라디오 버튼의 기본 폼을 알아봤으니, 선택/해제 동작을 알아보겠습니다.

<div>
    <input type="radio" id="one"   name="number" value="1" checked>One
    <input type="radio" id="two"   name="number" value="2">Two
    <input type="radio" id="three" name="number" value="3">Three
    <input type="radio" id="four"  name="number" value="4">Four
</div>
<script>    
    // 라디오버튼 Three 체크
    $("#three").prop("checked", true);
 
    // 라디오버튼 Three 체크 해제
    $("#three").prop("checked", false);
</script>

 

위의 코드는 각각 Jquery로 원하는 라디오 버튼을 체크, 해제하는 방법입니다.

 

라디오버튼 체크

 $("#라디오버튼 ID").prop("checked", true);

 

라디오버튼 체크해제

 $("#라디오버튼 ID").prop("checked", false);

 

라디오버튼의 체크와 체크해제를 위와같이 해주면 됩니다.

 

3) 라디오 버튼 선택된 값 조회

var checkVal = $('input[name=number]:checked').val();  // 체크된 라디오버튼 value 값

 

위의 코드는 라디오 버튼 중 체크된 라디오버튼의 value값을 조회해오는 코드입니다.

 

라디오버튼 체크된 value값 조회

$('input[name=라디오버튼 name]:checked').val();

 

위와같이 체크된 값을 조회할 수 있습니다.

---

라디오버튼에 관한 피드는 이쯤에서 마무리하겠습니다.