[jQuery] 화면 개발에 유용한 checkbox, radio 사용법

 

jQuery를 사용하여 화면을 개발할 때 항상 까먹고 헷갈리는 문법들을 정리 하고자한다. 

특히 체크박스와 라디오 버튼은 화면 개발시 많이 사용하게 되는데 자바스크립트 영역에서 이 두가지를 제어하는 방법에 대해 설명하도록 한다. 

# 추가로 메모할 내용은 해당 페이지에 계속 추가할 예정이다. 

체크박스 (checkbox)

<input type="checkbox" id="check" name="check"> 

 

- 체크박스 name, id를 선택자로 사용 

 > $("input[name='check']);  $("input:checkbox[name='check']") // name 으로 체크박스 지정 

 > $("#check") // id로 체크박스 지정 

- 체크박스 체크/해제

 > $("#check").prop("checked", true);

 > $("#check").prop("checked", false);

- 체크된 체크박스 갯수 확인 

 > $("#check:checked").lengh; 

- 체크박스가 체크된 상태인지 확인 

 > $("#check).is(":checked); // true or false

 

라디오 버튼 (radio button)

<input type="radio" id="pizza" name="food" value="PIZZA"> 피자
<input type="radio" id="chicken" name="food" value="CHICKEN"> 치킨

- 라디오 버튼 체크/해제 

 > $("#pizza").prop("checked", true);

 > $("#pizza").prop("checked", false); 

- value가 CHICKEN인 라디오 버튼 체크 

 > $("input[name='food'][value='CHICKEN']").prop("checked", true); // value에 따라서 동적으로 변경 할 때 변수와 함께사용 하면 좋음.

- 체크된 라디오 버튼의 value 확인 

 > $("input[name='food']:checked).val()