tableの中のチェックボックスの値を取得したい。

前提・実現したいこと

tableの一番左の列に入っているチェックボックスの値を取得したいです
その後trueかfalseで判別して、trueのやつだけ削除する。
というボタンを作ろうと思っています。

なので、（写真の赤い枠の）左の列のチェックボックスの値だけ取得する方法を教えて下さい。

発生している問題・エラーメッセージ

JavaScript
1let todolists = [todo,date,price,duedate,item,memo];
2console.log(todolists);
3mainTable = document.querySelector('.main-table')//　テーブル要素を取得する
4row = mainTable.insertRow(-1) //テーブルに行を追加してその行を返す
5todolists.unshift(j);
6
7for (var i = 0; i < 7; i++){
8cell = row.insertCell(-1) //行に <td> を追加して、その<td>を返す
9cell.textContent = todolists[i] // <td>内にテキストを入れる。
10}
11var checkbox = row.insertCell(0);
12var clearbtn = row.insertCell(-1);
13checkbox.innerHTML = "<input type='checkbox'>";
14clearbtn.innerHTML = '<input type="button" value="行削除" onclick="deleteRow(this)">';
15j += 1;
16console.log(j);
17}

補足情報

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

ベストアンサー

HTML
1<button onclick="foo();">button</button>
2<table id="table">
3  <tr>
4    <td><input type="checkbox" /></td>
5    <td>A</td>
6    <td>B</td>
7  </tr>
8  <tr>
9    <td><input type="checkbox" /></td>
10    <td>A</td>
11    <td>B</td>
12  </tr>
13  <tr>
14    <td><input type="checkbox" /></td>
15    <td>A</td>
16    <td>B</td>
17  </tr>
18</table>

JavaScript
1function foo() {
2  document.querySelectorAll("td:first-of-type input").forEach(check => console.log(check.checked));
3}

投稿2021/06/24 08:31

root_jp

総合スコア4666

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelectorAll('[value=del]').forEach(x=>{
4    x.addEventListener('click',()=>{
5      x.closest('tr').remove();
6    });
7  });
8  document.querySelector('[value="check del"]').addEventListener('click',()=>{
9    document.querySelectorAll('[name=del]:checked').forEach(x=>{
10      x.closest('tr').remove();
11    });
12  });
13});
14</script>
15<input type="button" value="check del">
16<table>
17<tr><td><input type="checkbox" name="del"></td><td>1</td><td><input type="button" value="del"></td></tr>
18<tr><td><input type="checkbox" name="del"></td><td>2</td><td><input type="button" value="del"></td></tr>
19<tr><td><input type="checkbox" name="del"></td><td>3</td><td><input type="button" value="del"></td></tr>
20<tr><td><input type="checkbox" name="del"></td><td>4</td><td><input type="button" value="del"></td></tr>
21</table>