03. [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법

[jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제하는 방법


일반적으로 라디오 버튼과 체크박스를 컨트롤하기 위해서는 jQuery의. attr() 함수를 많이 사용했습니다.
하지만 jQuery 1.6 버전 이후부터는. attr() 함수가. attr()과. prop() 함수로 구분되어 사용하도록 바뀌었습니다.

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

 

[예 1 - 라디오 버튼]

HTML
<label><input type="radio" name="fruits" value="사과"> 사과 </label>
<label><input type="radio" name="fruits" value="복숭아"> 복숭아 </label>

Javascript
$("input:radio[name='fruits']:radio[value='사과']").prop('checked', true); // 선택하기
$("input:radio[name='fruits']:radio[value='사과']").prop('checked', false); // 해제하기

 

[예 1 - 체크박스]

HTML
<label><input type="checkbox" name="fruits" value="사과">사과</label>
<label><input type="checkbox" name="fruits" value="복숭아">복숭아</label>
<label><input type="checkbox" name="fruits" value="포도">포도</label>
<label><input type="checkbox" name="fruits" value="참외">참외</label>

Javascript
$("checkbox[name='fruits']").prop('checked', true); // 전체 선택하기
$("checkbox[name='fruits']").prop('checked', false); // 전체 해제하기