Show/hide with CSS when checkbox is pressed

Question

I am trying to make the following Todo list.

https://gyazo.com/0b47106078622a1e44e912f56b5e9603

However, it is not possible to implement the following behavior when the checkbox is pressed.

[Requirements]

-Show/hide depending on task status -Toggle task display depending on radio button selected -If you add a new task when "Working" is selected, the task will be displayed -If you add a new task when "Complete" is selected, the task will not be displayed (but it is added correctly in the background)

[Currently known] ・Get checklist id from Javascript ・If you use the if statement, "If you press the completion check box, only the tasks that are pressing the completion button will be displayed (hide the work using CSS)" ・If statement is used, "If you press the check box of the work in progress, only the task that is pressing the work in progress is displayed (Hide completion using CSS)"

============

I have been thinking for about a week, but I have not been able to solve it. I would like to know about future implementation methods.

{
  document.addEventListener('DOMContentLoaded', () => {
    const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0];
    const addTaskTarget = document.getElementsByClassName('addTask-target')[0];
    const addTaskValue = document.getElementsByClassName('addTask-value')[0];
    let nextId = 0;
    const todos = [];

    //Taskとidを作成
    const addTask = (task, id, tableItem) => {
      const idSpanTd = document.createElement('td');
      const taskSpanTd = document.createElement('td');
      //タスク追加時にtodosにtodoを追加 
      const todo = {
        task: 'taskSpanTd',
        status: '作業中'
      };
      todos.push(todo);
      //要素内のHTML文章を変更する
      idSpanTd.innerText = id;
      taskSpanTd.innerText = task;
      //生成したテーブル要素をブラウザに表示する
      tableItem.append(idSpanTd);
      tableItem.append(taskSpanTd);
      addTaskTarget.append(tableItem);
    };

    //Button要素を生成する
    const addButton = (tableItem, removeButton, createButton) => {
      const createButtonTd = document.createElement('td');
      const removeButtonTd = document.createElement('td');
      //要素内のHTML文章を変更する
      createButton.innerText = '作業中';
      removeButton.innerText = '削除';
      //生成したテーブル要素をブラウザに表示する
      tableItem.append(createButtonTd);
      tableItem.append(removeButtonTd);
      addTaskTarget.append(tableItem);
      //生成したbutton要素を生成する
      createButtonTd.append(createButton);
      removeButtonTd.append(removeButton);
    };

    //追加ボタンをクリックした際にtd要素を追加する処理を行う
    addTaskTrigger.addEventListener('click', () => {
      const task = addTaskValue.value;
      const tableItem = document.createElement('tr');
      const removeButton = document.createElement('button');
      const createButton = document.createElement('button');
      addTask(task, nextId++, tableItem);
      addButton(tableItem, removeButton, createButton);
      addTaskValue.value = '';
      // //削除ボタンを押した時にタスクを削除する
      const deleteElement = (a) => {
        const tableTag =a.target.closest('tr');
        if (tableTag) tableTag.remove();
        updateId();
      }
      removeButton.addEventListener('click', deleteElement, false);

      //ボタンを押したら作業中、完了中と変わる
      createButton.addEventListener('click', () => {
        if (createButton.textContent === "作業中") {
          createButton.textContent = "完了";
        } else {
          createButton.textContent = "作業中";
        }
      });
    })

    function entryChange() {
      radio = document.getElementsByName('radio1')
      //ラジオボタンの0（すべて）がチェックされたとき
      if (radio[0].checked) {
        document.getElementsByClassName('done').style.display = "";
        document.getElementsByClassName('doing').style.display = "";
        //ラジオボタンの1(完了）がチェックされたとき
      } else if (radio[1].checked) {
        //フォーム
        doing.forEach(done => {
          console.log(done);
          document.getElementsByClassName('done').style.display = "";
          document.getElementsByClassName('doing').style.display = "none";
        })
        //ラジオボタンの2(作業中）がチェックされたとき
      } else if (radio[2].checked) {
        //フォーム
        doing.forEach(work => {
          console.log(work);
          document.getElementsByClassName('done').style.display = "none";
          document.getElementsByClassName('doing').style.display = "";
        })
      }
    }
    //オンロードさせ、リロード時に選択を保持
    window.onload = entryChange;


    //　連番　再振り直し
    const updateId = () => {
      const tbody = document.getElementsByTagName("tbody")[0];
      const taskList = tbody.getElementsByTagName('tr');
      nextId = 0;
      Array.from(taskList, tr => {
        tr.getElementsByTagName('td')[0].textContent = nextId;
        nextId++
      });
    }
  });
}

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Todoリスト</title>
</head>

<body>
  <h1>Todoリスト</h1>
  <p>
    <input type="radio" name="status" value="1" checked="checked">全て
    <input type="radio" name="status" value="2">作業中
    <input type="radio" name="status" value="3">完了
  </p>
  <p></p>
  <table>
    <thead>
      <th>ID</th>
      <th>コメント</th>
      <th>状態</th>
      <th></th>
    </thead>
    <tbody class="addTask-target" id="tbody"></tbody>
  </table>
  <h2>新規タスクの追加</h2>
  <input class="addTask-value" type="text" />
  <button class="addTask-trigger" type="button">追加</button>
  <script src="js/main.js"></script>
</body>
</html>

Answer 1

Here is a function of toggling hide and show

function toggleContent() {
  // Get the DOM reference
  const contentId = document.getElementById("content");
  // Toggle 
  contentId.style.display == "block" ? contentId.style.display = "none" :
    contentId.style.display = "block";
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button class="btn btn-success" onclick="toggleContent()">Toggle</button>
<div class="container" id="content" style="display:block;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>