[Html / JavaScript] Radio Button 라디오버튼 생성 / 기본으로 체크되어있게 하기 / 값에 따라 체크표시 하기

라디오 버튼

라디오버튼은 같은 name 속성을 갖는 요소들끼리는 한가지만 선택 할 수있도록 하는 버튼입니다.

예를들어, 성별에서 남 / 여 체크버튼은 라디오버튼을 많이 사용합니다. 남성 혹은 여성 둘중에 한가지만 선택 할 수있도록 하기 위해서 입니다.

 

 

라디오버튼 기본 구문

<input type="radio" name="gender" value="F">
<label class="form-check-label">
    여성
</label>

<input type="radio" name="gender" value="M">
<label class="form-check-label">
    남성
</label>

type = "radio"를 해주어야 라디오버튼을 사용할 수 있습니다.

name = "설정하고 싶은 이름" : 되도록이면 식별이 될 수 있는 이름을 사용하는게 코드 구성에 있어 좋습니다.

value = "설정값" 나중에 해당 체크된 라디오버튼에 값을 부여하고 싶다면 value를 이용해서 설정해주면 됩니다.

 

 

 

라디오버튼을 이용하여 여성/남성 선택지 만들기

라디오버튼에서 여러개의 항목중 한가지만 선택이 가능하도록 하기 위해서는 name 값을 모두 동일하게 설정해주면 됩니다.

 

See the Pen Untitled by Ella (@Ella_develop_floor) on CodePen.

 

type = "radio"를 해주어야 라디오버튼을 사용할 수 있습니다.

name = "설정하고 싶은 이름" : 되도록이면 식별이 될 수 있는 이름을 사용하는게 코드 구성에 있어 좋습니다.

value = "설정값" 나중에 해당 체크된 라디오버튼에 값을 부여하고 싶다면 value를 이용해서 설정해주면 됩니다.

 

 

 

---

 

라디오버튼 미리 체크되어있도록 기본체크값 만들기

네 혹은 아니오를 선택지로 갖는 라디오버튼을 만들었습니다. 

기본 체크값이 "네"로 되어있도록 하기 위해서 "네"의 부분에 checked 라는 옵션을 추가해주었습니다.

 

See the Pen Untitled by Ella (@Ella_develop_floor) on CodePen.

 

---

 

결과값에 따라 체크되게 만들기(JavaScript)

 

name = "gender" 인 라디오버튼이 있다고 할 때, 아래와 같은 코드를 이용하면 DB에서 가져온 값에 따라 체크를 표시 할 수있습니다.

 

radio 라는 변수로 라디오버튼의 속성들을 가져와서 배열을 이용해서 체크되게 만드는겁니다.

 

let radio = document.getElementsByName('gender');

if (gender == "F"){
    radio[0].checked = true;
} else {
    radio[1].checked = true;
}

 

 

---

 

게시글이 도움이 되었다면

[로그인]이 필요 없는 ❤ 눌러주세요:)