[HTML] 체크박스 & 라디오버튼 컨트롤하기

[HTML] 체크박스 & 라디오버튼 컨트롤하기

HTML을 처음 배우시는 분이나 아직 익숙치 않은 분들이라면 체크박스와 라디오 버튼을 쓰다보면

막히는 부분이 생길겁니다.

그 중 하나가 체크박스를 하나만 하고 싶을때 인데요~

일단 저는 소스를 이렇게 짜봤습니다.

<input type="radio" /><font>매우 그렇다.</font>

<input type="radio" /><font>그렇다.</font>

<input type="radio" /><font>보통이다.</font>

<input type="checkbox" /><font>있음</font>

<input type="checkbox" /><font>없음</font>

이렇게 나오는데 체크가 모두가 체크가 됩니다.

일단 라디오 버튼을 하나씩만 체크가 되게 하려면 어떻게 해야할까요?

바로 하나만 선택 해야할 것들의 name 을 똑같이 하면 됩니다.

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

<input type="radio" name="radio_answer"/><font>그렇다.</font>

<input type="radio" name="radio_answer"/><font>보통이다.</font>

<input type="checkbox" name="check_answer"/><font>있음</font>

<input type="checkbox" name="check_answer"/><font>없음</font>

이런식으로 하면 되죠 .

라디오 버튼 에는 radio_answer 라는 name 을 주었습니다.

체크박스 에는 check_answer 라는 name 을 주었습니다.

라디오 버튼은 이제 하나씩만 선택이 됩니다. 하지만 체크박스는 아직 중복 체크가 됩니다. ㅎㅎ

체크박스는 name을 같이 하더라도 하나씩만 선택되게는 되지 않습니다.

굳이 체크박스도 하나씩만 선택 하려 하고 싶다면 스크립트로 제어를 해주어야 합니다.

그럼 또 여기서 라디오버튼 과 체크박스의 체크 값을 가져오는 스크립트를 알려드리겠습니다.

방법이야 무궁무진합니다. 하지만 제가 주로 쓰는 방법을 알려드리겠습니다.

일단 체크 값들에게 대해서 값을 부여해주겠습니다.

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

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

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

<input type="checkbox" name="check_answer" value="Y" /><font>있음</font>

<input type="checkbox" name="check_answer" value="N" /><font>없음</font>

 

각각 버튼들에 대해서 value 값을 주었습니다.

여기서 사용할 것은 jQuery 입니다. 스크립트를 하는 분들이라면 jQuery는 기본적으로 사용하실거고

스크립트를 짜는데 도움을 많이 주는 라이브러리 입니다.

일단 라디오버튼의 name 이 공통적인것을 이용합니다. 

여기서 jQuery의 each 를 활용합니다.

$("input[name='radio_answer']").each(function(){

console.log($(this).val())

});

each 는 for 문 개념으로 생각하셔도 나쁘지 않을거 같습니다. 

radio_answer 라는 name 을 가진 태그 만큼 function을 수행합니다.

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

[결과값]

5

4

3

으로 나오게 됩니다.

radio_answer name을 가진 아이디들의 value 값을 다 불러왔죠???

그럼 여기서 체크 된 값만 불러 오려면 어떻게 해야할까요?!

그렇다를 체크 하겠습니다.

:checked 옆에 써주면 체크 된 값만 걸리게 됩니다.

$("input[name='radio_answer']:checked").each(function(){

console.log($(this).val())

});

[결과값]

 4

체크박스도 동일하게 하면됩니다.

그리고 마지막 CSS 팁 !

체크박스나 라디오 박스와 함께 텍스트의 높이가 다를때가 있습니다. 그럴때 높이는 어떻게 맞추어야 할까요?

쓸 팁은 바로 vertical-align 입니다. font에 vertical-align 을 조정 하면 텍스트의 높이가 달라집니다.

근데 여기서 제 코드를 보셨을때 font를 굳이 왜쓰냐 하시는 분들도 계실텐데 font를 안써도 

텍스트가 나오니까 상관은 없습니다. 다만 이렇게 css 를 주기 위해서 저는 font를 사용하였습니다.

그리고 하나씩 vertical-align 을 주기 보다는 스타일에 이렇게 줍니다.

input[type='radio']+font{

vertical-align: 10px;

}

이렇게 주게 되면 라디오 버튼의 font 높이만 조절을 하게 되는 겁니다. CSS의 선택자를 모르시는 분들은

선택자도 공부하시길 바랍니다.

radio 버튼만 높이가 적용되는걸 보실수 있습니다.

어떻게 보면 간단한건데 저는 만들때마다 어떻게 했더라 살짝 헷갈릴때가 있더라구요~~

갓 개발 공부를 시작하시거나 아직 초보분들에게 좋은 팁이 되었으면 좋겠습니다.