[jQuery] 체크박스 선택된 값 가져오기 plus input hidden val 값 추가로 가져오기(feat.형제태그 값(val) 찾기)

@pixabay Lawrence Monk

1. 체크박스 선택된 값 가져오기 plus input hidden val 값 추가로 가져오기(feat. 형제태그 값(val) 찾기)

개발을 하던도중 체크박스에 체크된 값뿐 아니라 input hidden 태그를 각행에 추가해서 그 추가 값까지 같이 가져와야 되는 경우가 생겨서 기록용으로 작성해 봅니다.

 

바쁜 분들을 위해서 먼저 소스를 보겠습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<tr>
	<td>
		<input type='checkbox' name='chkBox' value='A'>
		<input type='hidden' name='abx' id="abx1" value='aa'>
		1행 입니다.
	</td>
</tr>
<br/>
<tr>
	<td>
		<input type='checkbox' name='chkBox' value='B'>
		<input type='hidden' name='abx' id="abx2" value='ab'>
		2행 입니다.
	</td>
</tr>
<br/>
<tr>
	<td>
		<input type='checkbox' name='chkBox' value='C'>
		<input type='hidden' name='abx' id="abx3" value='ac'>
		3행 입니다.
	</td>
</tr>
<br/>
<tr>
	<td>
		<input type='checkbox' name='chkBox' value='D'>
		<input type='hidden' name='abx' id="abx4" value='ad'>
		4행 입니다.
	</td>
</tr>
<br/>
<tr>
	<td>
		<input type='checkbox' name='chkBox' value='E'>
		<input type='hidden' name='abx' id="abx5" value='ae'>
		5행 입니다.
	</td>
</tr>
<br/>
<input type='button' id="chkk" name='chkk' value='버튼'>

<script type="text/javascript">
  $( document ).ready(function() {	
	
	$("#chkk").click(function(){
		var tmpCnt = $("input[name='chkBox']:checked").length;
		
		if(tmpCnt > 0 ){
			$("input[name='chkBox']:checked").each(function(index) { 
			  var tmpVal = $(this).val(); 
			  console.log("$(this).val() ? = " + tmpVal);
			  console.log("index" + index + " = " + $(this).next().attr('id') + ", val = " + $(this).next().val());
			});
		}
		
		if(tmpCnt === 0){
			alert("체크박스를 선택해주세요");
			return;
		}
		
	});	
		
  });
  
</script>

 

실행 결과 입니다. 크롬에서 실행 시 해당화면을 console 탭에서 아래에 결과를 확인하 실 수 있습니다.

 

2. 작성한 소스 간단한 설명

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 

->  jquery를 사용하게 위해서 cdn으로 설정을 불러옵니다. 직접적으로 파일을 다운로드해서 상대경로로 해서 사용하는 방법이 있지만 편의상 cdn 방식으로 구현했습니다.

 

html 부분 입니다.

<tr>
	<td>
		<input type='checkbox' name='chkBox' value='A'>
		<input type='hidden' name='abx' id="abx1" value='aa'>
		1행 입니다.
	</td>
</tr>
<br/>
<tr>
	<td>
		<input type='checkbox' name='chkBox' value='B'>
		<input type='hidden' name='abx' id="abx2" value='ab'>
		2행 입니다.
	</td>
</tr>
<br/>
<tr>
	<td>
		<input type='checkbox' name='chkBox' value='C'>
		<input type='hidden' name='abx' id="abx3" value='ac'>
		3행 입니다.
	</td>
</tr>
<br/>
<tr>
	<td>
		<input type='checkbox' name='chkBox' value='D'>
		<input type='hidden' name='abx' id="abx4" value='ad'>
		4행 입니다.
	</td>
</tr>
<br/>
<tr>
	<td>
		<input type='checkbox' name='chkBox' value='E'>
		<input type='hidden' name='abx' id="abx5" value='ae'>
		5행 입니다.
	</td>
</tr>
<br/>
<input type='button' id="chkk" name='chkk' value='버튼'>

 

해당 html을 실행하게 된다면 아래와 같은 화면을 보실 수 있습니다.

script 부분입니다.

<script type="text/javascript">
  $( document ).ready(function() {	
	
	$("#chkk").click(function(){
		var tmpCnt = $("input[name='chkBox']:checked").length;
		
		if(tmpCnt > 0 ){
			$("input[name='chkBox']:checked").each(function(index) { 
			  var tmpVal = $(this).val(); 
			  console.log("$(this).val() ? = " + tmpVal);
			  console.log("index" + index + " = " + $(this).next().attr('id') + ", val = " + $(this).next().val());
			});
		}
		
		if(tmpCnt === 0){
			alert("체크박스를 선택해주세요");
			return;
		}
		
	});	
		
  });
  
</script>

먼저 해당 소스는 document ready 안에 구현하였습니다. 일반 function의 경우 ready 밖에 구현해 주시면 됩니다.

해당 구현 로직의 순서는 아래와 같이 3가지로 구성됩니다.

 

1. 체크박스에 체크를 한다.

2. 버튼을 클릭한다.

3. 체크박스 값뿐 아니라 input hidden에 val값도 같이 가져온다

 

1. 체크박스에 체크를 한다.

체크박스에 체크를 한다 는 딱히 조심해야 될 부분이 없으니 넘어갑니다.

 

2. 버튼을 클릭한다.

이제 2. 버튼이라고 써져 있는 걸 클릭하는 건데요 여기서 이제 체크 박스가 체크되어 있는지 체크를 해야 됩니다.

안 그러면 체크되지 않은 상태로 체크박스에 값이 넘어가게 되니 조심해야 됩니다.

 

그리고 tmpCnt는 체크박스에 체크된 개수(lengh)를 체크하기 위해서 작성한 변수인데 이걸 먼저 선언한 이유는 변숫값을 미리 선언함으로써 해당로직 호출 시 $("input [name='chkBox']:checked"). length; 값을 계속 호출하지 않기 위해서 변수로 선언했습니다.

 

그리고 체크된 tmpCnt의 개수로 체크가 없는 경우 사용자에게 알리기 위해서 alert으로 메시지를 호출하였고,

체크가 1개 이상 된 경우에만 다음 로직으로 넘어가게 설계했습니다.

 

 

$("#chkk").click(function(){
	var tmpCnt = $("input[name='chkBox']:checked").length;
	
	if(tmpCnt > 0 ){
		
	}
	
	if(tmpCnt === 0){
		alert("체크박스를 선택해주세요");
		return;
	}
	
});	
	
});

 

3. 체크박스 값뿐 아니라 input hidden에 val값도 같이 가져온다

$("input[name='chkBox']:checked").each(function(index) { 
  var tmpVal = $(this).val(); 
  console.log("$(this).val() ? = " + tmpVal);
  console.log("index" + index + " = " + $(this).next().attr('id') + ", val = " + $(this).next().val());
});

이제 소스를 보자면 가장 핵심적인 부분이 이 부분 일 걸로 생각이 듭니다.

$("input [name='chkBox']:checked"). each(function(index) {  로 해당 체크된 체크박스를 하나하나 돌면서 값을 체크합니다.

그리고 function(index)를 넣어놨는데 해당 로직 구현 시 필요할 거 같아서 넣었습니다.

 

index값은 0부터 시작합니다. 체크된 값이 0부터 시작하게 되니 그 아래 형제 태그를 찾아서 하는 방법이 있지만 여기에서는 this를 활용해서 작성해 보았습니다.

 

$(this)는 해당 태그 자신을 가리키게 됨으로 <input type='checkbox' name='chkBox' value='A'> , <input type='checkbox' name='chkBox' value='B'>, <input type='checkbox' name='chkBox' value='C'>.. 등등 이렇게 하나씩 돌면서 자기 자신을 가리키게 됩니다.

 

그리고 그 자기 자신에서 <input type='hidden' name='abx' id="abx1" value='aa'>, <input type='hidden' name='abx' id="abx2" value='ab'>, <input type='hidden' name='abx' id="abx3" value='ac'>.. 등등의 이렇게 aa, ab, ac의 hidden 값을 가져오는 게 문제있은데 $(this) 태그에서 부모나, 자식이 아닌 경우고 형제인 경우이니 $(this). next(). val()로 해서 형제 태그의 value를 가져오면 됩니다.