[HTML/CSS] 라디오버튼 여러개중 한개만 선택 가능하게 하기

라디오박스 넣는법

<div class="row mb-3">
	<label class="col-sm-2 col-form-label">불가능</label>
	<div class="col-sm-10">
		<input type="radio" class="form-control" id="yn" name="yn" value="N">
	</div>
</div>

<input type = "raido">를 사용하면 라디오박스(다중 중복 선택 불가능한 체크버튼)을 만들 수 있다.

(위의 코드는 BootStrap5 form 에서 응용함)

 

 

---

라디오박스 여러개중에 한개만 선택하게 하는법

바로 선택지들의 name을 통일해주면 여러개의 요소중 1개만 선택 할 수있게됩니다.

아래 예제코드를 보면 name을 똑같이 'yn'으로 설정 해 준것입니다.

<div class="row mb-3">
	<label class="col-sm-2 col-form-label">불가능</label>
	<div class="col-sm-10">
		<input type="radio" class="form-control" id="yn" name="yn" value="N">
	</div>
</div>

<div class="row mb-3">
	<label class="col-sm-2 col-form-label">가능</label>
	<div class="col-sm-10">
		<input type="radio" class="form-control" id="yn" name="yn" value="Y">
	</div>
</div>

---

3개 이상도 마찬가지로 가능합니다.

아래의 예제코드는 1번, 2번, 3번중에 한가지를 선택 할 수 있는 라디오버튼의 예시입니다.

모두 name을 'number'라고 설정 해 주었습니다.

<div class="row mb-3">
	<label class="col-sm-2 col-form-label">1번</label>
	<div class="col-sm-10">
		<input type="radio" class="form-control" name="number" value="1">
	</div>
</div>

<div class="row mb-3">
	<label class="col-sm-2 col-form-label">2번</label>
	<div class="col-sm-10">
		<input type="radio" class="form-control" name="number" value="2">
	</div>
</div>

<div class="row mb-3">
	<label class="col-sm-2 col-form-label">3번</label>
	<div class="col-sm-10">
		<input type="radio" class="form-control" name="number" value="3">
	</div>
</div>