jQuery 라디오(radio)버튼, 체크박스(checkbox) 선택/해제 하기

jQuery 를 이용해서 라디오(radio) 버튼과 checkbox(체크박스) 선택/해제하기

라디오버튼과 체크박스를 컨트롤 하기 위해 jQuery 의 attr 함수를 많이 사용했습니다.

물론 저 또한 얼마 전까지만 해도 attr 함수를 사용했었죠.

하지만 이제 보니 여기저기 막 사용해도 되는 함수가 아니였네요.ㅎㅎㅎ

jQuery 1.6 버전 이 후 부터는 .attr() 함수를 .attr() 과 .prop() 함수로 나누었다고 합니다.

여튼 결론적으로 라디오버튼과 체크박스를 javascript 에서 다루기 위해서는 .prop() 를 사용하자.

Radio 예제

HTML

<label><input type="radio" name="trans" value="남자">남자</label>

<label><input type="radio" name="trans" value="여자">여자</label>

Javascript

$("input:radio[name='trans']:radio[value='남자']").prop("checked", true); // 선택하기

$("input:radio[name='trans']:radio[value='남자']").prop("checked", false); // 해제하기

남자 여자

 

Checkbox 예제

HTML

<label><input type="checkbox" name="where" value="서울">서울</label>

<label><input type="checkbox" name="where" value="대전">대전</label>

<label><input type="checkbox" name="where" value="대구">대구</label>

<label><input type="checkbox" name="where" value="부산">부산</label>

Javascript

$("input:checkbox[name='where']").prop("checked", true); // 전체선택 하기

$("input:checkbox[name='where']").prop("checked", false); // 전체해제 하기

서울 대전 대구 부산