라디오 버튼 활용하기

기본적이지만 막상 구현하려니 헷갈렸던 라디오 버튼을 만드는 방법을 기록해보려 한다.

가장 헷갈렸던 부분은 라디오 버튼 옆의 label을 클릭했을 때 라디오 버튼이 클릭되는 기능이었다. 방법은 간단했다.
label 태그의 for값과 type="radio"를 가진 input 태그의 id값을 같게 해주면 된다.

<li class="option-item">
  <label for="rd1" class="label">초콜릿</label>
  <input type="radio" id="rd1" class="input-radio" name="base" checked>
</li>
<li class="option-item">
  <label for="rd2" class="label">바닐라</label>
  <input type="radio" id="rd2" class="input-radio" name="base">
</li>

❗️여기서 두 라디오 버튼의 name 값을 동일하게 주지 않으면 각각 다른 그룹의 라디오 버튼으로 인식이 돼서 둘 다 선택할 수 있게 되므로, 같은 그룹 내의 라디오 버튼에는 동일한 name 값을 주도록 한다.

---

라디오 버튼 스타일링 하기

.input-radio {
	& + .label .label-icon {
    	border-radius: 100%;
    }
    &:checked + .label .label-icon {
    	border: 8px solid green;
    }
}

😮 .label-icon 을 쓸 때 단독으로 쓰지 않고 .label 안의 .label-icon 가 될 수 있도록 적어준다.