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

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

일반적으로 라디오버튼과 체크박스를 컨트롤 하기 위해서는 jQuery 의 .attr() 함수를 많이 사용 했다.

하지만 jQuery 1.6 버전 이후 부터는 .attr() 함수가 .attr() 과 .prop() 함수로 구분되어 사용하도록 바뀌었다.

2017/09/28 - [develop/javascript] - [jQuery] .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); // 전체해제하기