JS / 제이쿼리 여러 체크박스(input 태그) 중 현재 체크된 체크박스 (input 태그) 값 가져오기

 

 

 

쇼핑몰또는 기타 서비스에서 클라이언트(사용자)로 부터 특정 값을 입력 받는 화면은 대부분 사용되고 있다.

 

그중 여러 선택지를 주고 하나를 고르게 하는 형태로 input 태그의 체크박스 형식을 자주 사용하게 되는데

 

클라이언트(사용자)에 의해 체크된 값을 저장하기 위해

 

우선 값을 가져와야 하는 경우가 있는데 아래와 같이 구현 가능하다.

 

 

$("input[name=sauce]:checked").val()

 

 

input 태그의 'name' 속성을 이용한 것인데, 보통 여러 체크박스 선택지는 하나의 주제로 묶인다.

 

그래서 각 input 태그의 name을 동일하게 설정한 후 위 처럼 제이쿼리를 사용해서

 

input 태그의 (name이 sauce 라고 가정) name이 sauce인 태그들 중

 

체크된(:checked) 값을 val() 함수로 가져오게 한다.

 

해당 코드를 if 문의 조건식으로 바로 사용하거나 변수에 담은 다음 다양하게(?) 활용하면 되겠다.