본문 바로가기
Web/HTML

[HTML] 라디오버튼/radio/label태그/개별선택/중복선택

by 나비와꽃기린 2016. 9. 29.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
<!-- 1 번 라디오버튼 그룹 -->
<input type="radio" id="r1" name="caUse" class="radio_m" /><label for="r1">111111</label>
<input type="radio" id="r2" name="caUse" class="radio_m" /><label for="r2">2222222</label>

<br>
<br>

 <!-- 2 번 라디오버튼 그룹 -->
<input type="radio" id="rdotit8_1" name="radio_" class="rdo" /> 1111
<input type="radio" id="rdotit8_2" name="radio_" class="rdo" /> 2222
<input type="radio" id="rdotit8_3" name="radio_" class="rdo" /> 3333

<br>
<br>

 <!-- 3 번 라디오버튼 그룹 -->
<input type="radio" id="rdotit8_1" name="radio1" class="rdo" /> 1111
<input type="radio" id="rdotit8_2" name="radio2" class="rdo" /> 2222
<input type="radio" id="rdotit8_3" name="radio3" class="rdo" /> 3333

1번 라디오버튼  그룹 설명


<label> 태그는 라디오 버튼이나 체크박스를 클릭할때 해당 버튼을 클릭하지 않고 버튼옆에 텍스트를 클릭해도 그 버튼이 선택되도록 해주는 태그이다.

따라서 111111, 222222 글씨를 클릭해도 라디오 버튼이 선택되어진다.


2번 라디오버튼  그룹 설명

<label> 태그가 없기에 라디오버튼을 클릭해야지만 선택이 된다.


3번 라디오버튼 그룹 설명

name값을 모두 다르게 지정하면 중복선택이  가능하다.

1번,2번 그룹의 라디오 버튼들은 name값이 같으므로 1개의 라디오버튼만 선택이 가능하다.



<<결과>>