如果复选框为 true，则在文本区域中显示值

Question

>我有一个包含四列名称，年龄，国家/地区和一个复选框的表格。如果单击该复选框 (true(，则行的name值将显示在textarea中。

我真的不确定我如何才能意识到这一点。

一行：

<tr>
<th scope="row">1</th>
<td>James</td>
<td>13</td>
<td>France</td>
<td><input type="checkbox"></td>
</tr> 

如果复选框为 true，则值"James"应显示在文本区域中。

谢谢大家。

Answer 1

我相信您需要对表中的多行执行此操作。

首先使用 Document.querySelectorAll(( 选中所有复选框，以将事件(单击(附加到所有复选框。

Document 方法querySelectorAll()返回一个静态(非实时(NodeList，该 NodeList 表示与指定的选择器组匹配的文档元素列表。

在事件(单击(处理程序函数中，针对所有选中的复选框以循环访问它们以使用 Array.prototype.map(( 获取相关名称：

map()方法创建一个新数组，其中填充了对调用数组中的每个元素调用所提供函数的结果。

此外，在同一tr元素内混合使用th和td也不是好的做法。您应该将th放在thead内部，将td放在tbody元素内：

var cb = document.querySelectorAll('input[type=checkbox]');
cb.forEach(function(ck){
ck.addEventListener('click', function(el){
var checked = document.querySelectorAll(':checked');
var tArea = document.getElementById('myText');
tArea.value = Array.from(checked).map(c => c.closest('tr').querySelector('td:nth-child(2)').textContent);
//or using spread syntax
//tArea.value = [...checked].map(c => c.closest('tr').querySelector('td:nth-child(2)').textContent);
});
});

table, th, td {
border: 1px solid black;
}

<table>
<thead>
<tr>
<th>Sl</th>
<th>Name</th>
<th>No</th>
<th>Country</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>James</td>
<td>13</td>
<td>France</td>
<td><input type="checkbox"></td>
</tr> 
<tr>
<td scope="row">2</td>
<td>John</td>
<td>15</td>
<td>Germany</td>
<td><input type="checkbox"></td>
</tr> 
</tbody>
</table>
<textarea id="myText"></textarea>

Answer 2

试试这个：

[...document.querySelectorAll("input[type='checkbox']")].forEach(function (v){
v.addEventListener("change", function(){
document.querySelector("textarea").value = (this).checked ? (this).parentElement.parentElement.querySelector("td").innerHTML:'';
})});

<table>
<tr>
<th scope="row">1</th>
<td>James</td>
<td>13</td>
<td>France</td>
<td><input type="checkbox"></td>
</tr> 
<tr>
<th scope="row">1</th>
<td>James</td>
<td>13</td>
<td>France</td>
<td><input type="checkbox"></td>
</tr> 
</table>
<textarea></textarea>

Answer 3

很少有JavaScript行可以满足你的需要。

let input = document.querySelector('input');
input.addEventListener('change', e=> {
if(e.target.checked == true){
// retreive tags
let name = document.querySelector('.name');
let textarea = document.querySelector('.textarea');
// insert data
textarea.innerText += name.innerText
}
})

<table>
<tr>
<th scope="row">1</th>
<td class="name">James</td>
<td>13</td>
<td>France</td>
<td><input type="checkbox"></td>
</tr>   
</table>
<textarea class="textarea"></textarea>

Answer 4

由于您的表可以有多个行，其中每行都可以设置复选框，也可以不设置复选框，因此文本区域可以获取零个、一个或多个名称。

因此，您需要侦听change事件，然后迭代行以收集名称，以最终设置 textarea 的值：

let textarea = document.querySelector("textarea");
let table = document.querySelector("table");
table.addEventListener("change", function (e) {
let names = [];
for (let row of table.rows) {
if (row.querySelector("input[type=checkbox]").checked) {
names.push( row.children[1].textContent);
}
}
textarea.value = names.join("n");
});

<table><tr>
<th scope="row">1</th>
<td>James</td>
<td>13</td>
<td>France</td>
<td><input type="checkbox"></td>
</tr><tr>
<th scope="row">2</th>
<td>Lucy</td>
<td>14</td>
<td>Germany</td>
<td><input type="checkbox"></td>
</tr></table>
<textarea></textarea>