jQuery 체크박스 제어

jquery id로 접근

$(test1).prop("checked");

checkbox의 주요 속성

name = 체크박스의 이름

length = 동일한 이름의 체크박스의 갯수

checked = 체크박스의 체크여부 true 나 false 를 리턴

value = 체크박스의 값

checkbox 제어의 기본 개념

checkbox 는 동일한 이름을 가진 체크박스들이 여러개 존재하며 다수의 선택을 가능하게 하는 기능을 제공합니다.

checkbox 는 배열의 개념이 필요하기 때문에 getElementById가 아닌 getElementsByName 을 이용하여 제어할 수 있습니다.

ID 가 아닌 Name 을 이용하기 때문에 태그에 ID를 지정할 필요는 없습니다.

간단 사용방법

<input type="checkbox" name="food" value="pizza" />피자

<input type="checkbox" name="food" value="pasta" />파스타

<input type="checkbox" name="food" value="rice" />밥

<input type="checkbox" name="food" value="fruit" />과일

<input type="button" name="btn" value="음식선정" onclick="selectFood()" />

 

//javascript

function selectFood(){

food = document.getElementsByName("food");

 

//체크박스의 이름

food.name;

 

//체크박스의 길이

food.length;

 

//첫번째 인덱스의 체크여부

food[0].checked;

 

//두번째 인덱스의 value

food[1].value; //"파스타"가 아니라 "pasta"임

}

 

 

javascript가 체크상태를 바꿀 수도 있습니다

<script>

...

...

food[0].checked=true;

food[1].checked=false;

</script>