🔊🔍 jquery checkbox 선택 / 해제 방법 🔊🔍

 

jQuery를 이용한 체크박스 선택 및 해제 방법

웹 개발을 하다 보면, JavaScript 라이브러리 중 하나인 jQuery를 사용하여 체크박스를 프로그래매틱하게 제어해야 하는 상황이 종종 발생합니다. 

 

이 포스트에서는 jQuery를 이용해 체크박스를 선택하거나 해제하는 방법을 소개하겠습니다.

 

체크박스 선택하기

아래의 jQuery 코드는 특정 ID를 가진 체크박스를 선택하는 방법을 보여줍니다:

 

$("input:checkbox[id='체크박스아이디']").prop("checked", true);

 

이 코드는 '체크박스아이디'라는 ID를 가진 체크박스를 찾아서 선택합니다. .prop("checked", true) 부분이 체크박스를 선택하도록 설정합니다.

체크박스 해제하기

체크박스를 해제하려면, true 대신 false를 사용합니다:

 

$("input:checkbox[id='체크박스아이디']").prop("checked", false);

 

이 코드는 체크박스의 선택을 해제합니다.

 

이름으로 체크박스 선택/해제하기

ID 대신 이름(name)을 사용하여 체크박스를 선택하거나 해제할 수도 있습니다. 예를 들어, 특정 이름을 가진 모든 체크박스를 선택하려면 다음과 같이 합니다:

 

$("input:checkbox[name='체크박스name']").prop("checked", true); // 선택
$("input:checkbox[name='체크박스name']").prop("checked", false); // 해제

 

 

참고 사항

jQuery에서 ID를 지정할 때는 #을 사용하는 것이 일반적입니다.
하지만 :checkbox[id='아이디'] 형태로 쓰는 것도 가능합니다. 

이 방식은 좀 더 구체적으로 체크박스 요소를 지정할 때 유용할 수 있습니다.

만약 동일한 이름을 가진 여러 체크박스를 한 번에 제어하고 싶다면, name 속성을 사용하는 것이 효과적입니다. 

이렇게 하면 동일한 name 값을 가진 모든 체크박스를 쉽게 선택하거나 해제할 수 있습니다.

 

마무리

jQuery를 사용하여 체크박스를 제어하는 것은 매우 간단하며, 사용자 인터페이스의 상호작용을 풍부하게 만드는 데 도움이 됩니다. 

위에서 설명한 방법을 사용하면 웹 페이지 내에서 체크박스의 상태를 쉽게 제어할 수 있으며, 다양한 상황에서 유용하게 활용할 수 있습니다.