todoリストのタスクをラジオボタンの全て、作業中、完了で表示・非表示を分けたいです。 このサイトで皆様よりアドバイスを頂き、調べてコードを書き換えて、 エラーは解消されたのですが、期待する動作① ②が実装さません。 色々調べて実装したのですが、これ以上積んでわからない状態です。 何方かアドバイスをお願いします。 期待する動作 ① タスクの状態によって表示/非表示を切り替えできる ② 選択されたラジオボタンに応じて、タスクの表示を切り替える

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>課題③</title>
</head>
<body>
    <h1>TODOリスト</h1>
    <!-- <form class="radio">
        <input type="radio" name="list" checked="checked" id="radio-all-select" onchange="radioChange()" value="all">全て
        <input type="radio" name="list" id="radio-working-select" onchange="radioChange()" value="working">作業中
        <input type="radio" name="list" id="radio-done-select" onchange="radioChange()" value="done">完了
    </form>
     -->
    <p class="radio">
      <input type="radio"  name="list" value="1" checked ="checked"
      ><label for="r1">全て</label>
      <input type="radio" id="radio-working" name="list" value="2"><label for="r2">作業中</label>
      <input type="radio" id="radio-done" name="list" value="3"><label for="r3">完了</label>
    </p>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>コメント</th>
      <th>状態</th>
    </tr>
  </thead>
    <tr>
      <td></td>
      <!-- <td>0</td>
      <td>test</td>
      <td><button>作業中</button></td>
      <td><button>完了中</button></td>
      <td><button>削除</button></td> -->
    </tr>
    <tbody id="list"></tbody>
</table>
  
    
    <h2>新規タスクの追加</h2>
    <input type="text" id="newtask"/>
    <button id="add">追加</button>

    <script src="main.js"></script>
</body>
</html>

main.js

"use strict";

//inputタグを取得して変数に入れる
const newtask = document.getElementById("newtask");
// 入力された値をリストに追加する
const add = document.getElementById("add");
//削除ボタンを押したときに何かの処理を実行したい

const deleteTask = (btn) => {
  const task = btn.closest("tr");
  const tbody = task.closest("tbody");
  //remove関数を呼び出してタスク(テーブルの一行の要素)を削除します
  task.remove();
  tbody.querySelectorAll("tr").forEach((x, y) => {
    x.setAttribute("id", `id-${y + 1}`);
    x.querySelector("td").textContent = y + 1;
  });
  id--;
};
//idの変数を用意
let id = 0;

add.addEventListener("click", () => {
  if (newtask.value == "") {
    return;
  }
  id += 1;
  const list = document.getElementById("list");
  const tr = document.createElement("tr");

  const taskId = `task-${id}`;
  tr.id = taskId;
  const comment = newtask.value;

  // 分かりやすい変数名をつけます
  const workButton = document.createElement("button");
  workButton.innerHTML = "作業中"; //完了の状態でボタンをクリックすると作業中へ変更される
  //作業中の状態でボタンをクリックすると完了へ変更される
  workButton.addEventListener("click", () => {
    if (workButton.innerHTML === "作業中") {
      workButton.innerHTML = "完了";
    } else {
      workButton.innerHTML = "作業中";
    }
  });

  const deleteButton = document.createElement("button");
  deleteButton.innerHTML = "削除";

  deleteButton.addEventListener("click", () => deleteTask(deleteButton));
  // テーブルの行に必要なデータの配列を作成します
  const cloumns = [id, comment, workButton, deleteButton];

  // 配列の中身を一つずつ取り出して処理をします
  cloumns.forEach((cloumn) => {
    // テーブルの列を作成します
    const td = document.createElement("td");

    // HTMLタグ処理を変更
    if (cloumn instanceof HTMLElement) {
      td.appendChild(cloumn);
    } else {
      td.innerText = cloumn;
    }
    //行に列を追加します
    tr.appendChild(td);
  });
  //テーブルに行を追加
  list.appendChild(tr);
  newtask.value = "";
});

// チェックボックスの表示の切替
const option = document.getElementsByName("radio");

const checkTasks = () => {
  const workingTasks = document.querySelectorAll(".work");
  const doneTasks = document.querySelectorAll(".finish");

  if (option[1].checked) {
    workingTasks.forEach((workingTasks) => {
      workingTasks.style.display = "";
    });
    doneTasks.forEach((doneTasks) => {
      doneTasks.style.display = "none";
    });
  } else if (option[2].checked) {
    doneTasks.forEach((doneTasks) => {
      doneTasks.style.display = "none";
    });
    workingTasks.forEach((workingTasks) => {
      workingTasks.style.display = "";
    });
  } else {
    workingTasks.forEach((workingTasks) => {
      workingTasks.style.display = "";
    });
    doneTasks.forEach((doneTasks) => {
      doneTasks.style.display = "";
    });
  }
};