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. 실행결과