jquery checkbox값 가져오기

예전엔 html요소에 접근하거나 제어할때는 전부 자바스트립트를 이용했습니다.

물론 거의 모든걸 접근 제어 가능했고 지금도 자주 사용합니다.

 

하지만 요즘 대세는 제이쿼리(jquery)죠

요소에 접근하거나 제어하는데 너무 쉽고 간단하게 처리할수 있습니다.

 

jquery 구문도 실제로 자주 사용하는 위주로 포스팅을 해볼까 합니다.

 

오늘은 첫번째로 jquery를 이용해서 checkbox값을 가져오는 방법에 대해 알아보도록 하겠습니다.

 

 

<input type="checkbox" name="cart_seq" id="cart_seq" value="10">

<input type="checkbox" name="cart_seq" id="cart_seq" value="11">

<input type="checkbox" name="cart_seq" id="cart_seq" value="12">

<input type="checkbox" name="cart_seq" id="cart_seq" value="13">

 

위와 같은 checkbox리스트가 있습니다. 실제로 쇼핑몰 장바구니 목록에서 가져온 내용입니다

체크된 값을 가지고 선택주문을 구현하기 위한 목록인데요

 

여기에서 jquery를 이용해서 선택된 값을 구해보겠습니다.

<script language="javascript">

1. $(":checkbox[name='cart_seq']:checked").length

 

2. var checked_seq = "";
   $(":checkbox[name='cart_seq']:checked").each(function(i,e){
       if(checked_seq == ""){
         checked_seq = e.value;
        }else{
         checked_seq += "^"+e.value;
        }
   });

</script>

 

위의 자바스트립트에서 1번째 구문을 보면 cart_seq의 이름을 가진 체크박스의 길이를 구하는 구문입니다.

길이가 0이면 체크를 하지 않은 상태이므로 체크박스를 하나 이상 선택하라는 alert창을 띄우는데 사용할 수 있습니다.

 

2번째 구문은 jquery루프문으로 cart_seq의 이름을 가진 체크박스의 값들을 checked_seq란 변수에 집어 넣습니다.

주의할 점은 값이 시작할때는 값 자체를 넣고 이후 값이 있는 상태에서는 구분자와 값을 함께 넣어줍니다.

결국은 배열 값으로 넣는 형태입니다.

 

이후 액션을 통해서 다음페이지 이동시 이 변수값을 배열로 처리할 수 있습니다.

 

위 구문을 보면 예전 자바스크립트로 처리할때보다 아주 간단하고 편해진것을 알수 있습니다.

 

 

저는 아직도 jquery와 자바스크립트를 혼용해서 사용합니다. 항상 jquery가 편하고 좋은것만은 아니기 때문입니다.

사실 아직도 자바스크립트가 편하긴 하지만 될수 있으면 jquery를 사용할려고 노력한는거죠