JavaScript | jQuery/Table

[JavaScript | jQuery] Checkbox 선택된 Row의 다른 값 가져오기

은정재 2022. 5. 25. 13:42
- 지난 게시글의 내용을 응용하여, Checkbox가 선택된 Row(<tr>)의 다른 값(<td>)을 가져오는 방법에 대해 기술한다.

https://egurishun.tistory.com/22

 

[Javascript] Checkbox 하나만 선택되게 하기

- 일반적으로 Table에서 하나만 선택되도록 구현하려면 Radio 버튼을 주로 사용한다. 하지만, 기획 또는 UI 등의 이유로 불가피하게 Checkbox를 사용하여 하나만 선택되는 기능을 구현하는 경우에 대

egurishun.tistory.com

 

1. Code

function checkBoxSelect(element) {

	var obj = document.getElementsByName("test");
	for (var i = 0; i < obj.length; i++) {
		if (obj[i] != element) {
			obj[i].checked = false;
		}
		else {
			if (obj[i].checked) {
				var firstTxt = $('#testTable').find('tr').eq(i).find('td').eq(1).text();
				var secondTxt = $('#testTable').find('tr').eq(i).find('td').eq(2).text();
				console.log(firstTxt);
				console.log(secondTxt);
			}
		}
	}

}

<table id="testTable">
	<tr>
		<td><input type="checkbox" name="test" onClick="checkBoxSelect(this)"></td>
		<td>text1_1</td>
		<td>text1_2</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="test" onClick="checkBoxSelect(this)"></td>
		<td>text2_1</td>
		<td>text2_2</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="test" onClick="checkBoxSelect(this)"></td>
		<td>text3_1</td>
		<td>text3_2</td>
	</tr>
</table>

2. 실행결과

3번째 Checkbox를 선택한 경우 콘솔창 출력 확인