[HTML] 라디오버튼(radio button) 체크박스(check box) 버튼 차이점

 

 

1. 라디오 버튼 (Radio Button)

---

라디오 버튼 특징은 여러 라디오 버튼 중 하나만 선택 가능하다.

인라인 태그에 있는 'checked'는 라디오 박스에 기본값으로 체크 된 상태에서 로딩하라는 표시이다.

라디오 버튼는 여러개 중 하나만 선택되어야 하는데 name 값이 같지 않거나 없다면 제 기능을 발휘하지 못한다.

만약 라디오 버튼 속성에 name 없으면 모두 체크하거나 해제할 수 있는데 그것은 라디오 버튼라고 할 수 없다.

 

<form action="action.jsp">
	<div><input type="radio" name="sex" value="male" checked>남성</div>
 	<div><input type="radio" name="sex" value="female">여성</div>
   	<div><input type="submit" value="전송"></div>
</form>

 

 

 

그럼 여기서 체크 값을 가져오는 스크립트를 알아보자.

<input type="radio" name="radio_answer" value="5" />
<label>매우 그렇다.</label>

<input type="radio" name="radio_answer" value="4" />
<label>그렇다.</label>

<input type="radio" name="radio_answer" value="3" />
<label>보통이다.</label>

 

일단 체크 값들에게 값(value)을 부여한다.그리고 라디오버튼의 name 고통적인것을 이용해서 스크립트를 짠다.

 

 

 

$("input[name='radio_answer']").each(function(){
	console.log($(this).val())
});

radio_answer 라는 name 을 가진 태그 만큼 function을 수행한다는 제이쿼리다.

저렇게 스크립트를 작성하면 결과값이 어떻게 나올까?

 

 

 

 

[결과값]
5	<!--매우 그렇다-->
4	<!--그렇다-->
3	<!--보통이다-->

각각의 라디오 버튼의 값을 불러왔다면 체크된 라디오 버튼의 값만 가져오려면 어떻게 해야할까? 우선 :checked 속성을 넣어준다.

 

 

 

<input type="radio" name="radio_answer" value="5" />
<label>매우 그렇다.</label>

<input type="radio" name="radio_answer" value="4" checked />
<label>그렇다.</label>

<input type="radio" name="radio_answer" value="3" />
<label>보통이다.</label>

$("input[name='radio_answer']:checked").each(function(){	
	//checked 된 라디오버튼 값
	console.log($(this).val())
});

//결과값 4

 

 

 

 

 

 

 

 

2. 체크박스 (Check Box)

---

다중 선택이 가능하도록 만들어진 타입입니다. name 값이 같더라도 여러 개 선택이 가능.

서버에서 값을 받을 때 어떤 name에 값인지 구분하기 쉽도록 다르게 표현하는것이 좋다.

 

<form action="action.jsp">
	<p>주문 음식을 표시하세요</p>
	<div><input type="checkbox" name="food01" value="mandoo" checked>만두</div>
   	<div><input type="checkbox" name="food02" value="jjajang">짜장</div>
   	<div><input type="submit" value="전송"></div>
</form>

 

 

 

 

 

 

3. label 태그

---

이 요소는 해당 폼 요소에 어떤 값을 넣어야 하는지 이름을 붙이는 요소이다.

라벨은 꼭 명시 하는것이 좋으며 라벨 들어갈 공간이 없을경우 해당 입력 요소에 title 속성이라도 명시하는것이 좋다.

 

<label for="id">아이디 입력</label>
<input type="text" id="id" />

 

위와 같이 label의 for의 값과 양식의 id의 값이 같으면 연결된다.

만약 label이 폼 요소를 포함하더라도 for 값이 해당 폼 요소가 아니라면 서로 연결되지 않는다.

lable이 폼 요소와 연결이 잘 이뤄진 경우라면 마우스로 label을 클릭만 해도 해당하는 폼 입력 요소로 포커스가 맞춰진다.