JSを使ってタスク表示、非表示機能を作りたい

Question

Laravelを使ってTodoリストを作っています。
今、現在タスク表示、非表示機能を作っています。（全て、作業中、完了のラジオボタンごと表示を切り替える）
PHPを使っての実装はできたのですが、JSを使うと良いとアドバイスを受け同じような処理が実装できずに悩んでいます。
・PHPを使ったやり方

 <label><input type="radio" name="all" value="0" onclick="location.href='/todos'" {{$checked0}}>すべて</label>
  <label><input type="radio" name="task" value="1" onclick="location.href='/todos/task'" {{$checked1}}>作業中</label>
  <label><input type="radio" name="radio" value="2" onclick="location.href='/todos/finish'" {{$checked2}}>完了</label>

public function index(Request $request)
    {
        $items = Todo::all();

        $data = [
            'checked0' => 'checked',
            'checked1' => '',
            'checked2' => ''
        ];
    
        return view('todo.index', ['items' => $items], $data);
    }

    public function task(Request $request)
    {
        $items = Todo::where('status', 0)->get();
        $data = [
            'checked0' => '',
            'checked1' => 'checked',
            'checked2' => ''
        ];
        return view('todo.index', ['items' => $items], $data);
    }

    public function finish(Request $request)
    {
        $items = Todo::where('status', 1)->get();
        $data = [
            'checked0' => '',
            'checked1' => '',
            'checked2' => 'checked'
        ];
        return view('todo.index', ['items' => $items], $data);
    }

この処理をJavaScriptを使って、作業中のラジオボタンがチェックされたら「作業中」のデータのみをループで回すという処理がしたいです。
一応JavaScriptでここまで書いてみたのですが、ここからの処理に悩んでいます。

let elements = document.getElementsByName('select');

if(elments[0].checked) {
  document.location.href = "/todos";
}

if(elements[1].checked) {
  
}

if(elements[2].checked) {

}

Answer 1

「JSを使うと良い」とは
「表示の切り替えはサーバ通信なしでクライアントサイドだけでやると良い」(＝見た目だけ変えると良い)
という意味じゃないでしょうか？
（既に onclick="location.href=～" でJS使ってますし）

リストのタグ構成がわからないですが
リストの各行にclassで「作業中(task)」「完了(finish)」の印をつけておいて
JSで切りかえるイメージです。

サンプルコードはこんな感じです。（めんどくさいのでjQuery使いました）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(function(){
	// ラジオボタンがクリックされたときの処理
	$('input[name="status"]').click(function(){ 
		if ($(this).val() == '1') { // クリックされたラジオボタンが「作業中」
			$('.task').show(); // classが「task」の要素を表示
			$('.finish').hide();  // classが「finish」の要素を隠す
		}
		else if ($(this).val() == '2') { // クリックされたラジオボタンが「完了」
			$('.task').hide(); // classが「task」の要素を隠す
			$('.finish').show();  // classが「finish」の要素を表示
		}
		else { // クリックされたラジオボタンが「すべて」
			$('.task').show();  // classが「task」の要素を表示
			$('.finish').show();  // classが「finish」の要素を表示
		}
	});
});
</script>

<div>
	<label><input type="radio" name="status" value="0">すべて</label>
	<label><input type="radio" name="status" value="1">作業中</label>
	<label><input type="radio" name="status" value="2">完了</label>
</div>

<div>
	<div class="finish">[完了]手を洗う</div>
	<div class="finish">[完了]うがいをする</div>
	<div class="task">[作業中]消毒をする</div>
	<div class="task">[作業中]マスクをする</div>
</div>

Comments

[extend06]

回答ありがとうございます。
アドバイスを参考にやってみます！

[hentaiman]

リロードした時に戻ってしまってもいいのかな？

[extend06]

リロードした時に戻っても大丈夫です！
①各ラジオボタンを格納したプロパティ②各タスク状況ボタンを格納したプロパティ③タスク切り替えるメソッド
→この3つの構成で実装することが出来るとアドバイスを頂いたのですが、JSが不慣れで苦戦中です泣

[hentaiman]

そのアドバイスの仕方だと会社の先輩から教えてもらったの？教えてくれた人は実際にサンプルコード作れる人なの？作れる人なら実際に作って見せてもらってコードの説明もしてもらった方がいいよ
もし会社関係無い（というかコード作って教えてくれない）他人からのアドバイスだとしたら教え方が意地悪過ぎると思う

[hentaiman]

作れない人からのアドバイスだったら（教えてくれた人が）論外なので、アドバイスはスルーしていつかjavascriptに慣れて使いこなせるようになった頃に改めて再実装を試すのが良いと思う

[extend06]

コメントありがとうございます。
仕事としてではなく、エンジニアを目指して勉強しています。
メンターさんに勉強を見てもらっている形です。
Todoリストを作ってみるという課題を行なっているのですが、laravelのコントローラーを使うやり方よりもJSを組み込んでやった方がいいそうなのでチャレンジしています。
JSはドットインストールで少しやったことがあります。メンターさんにも質問し調べながらやってはいるのですが知識がなさすぎて思ったような処理にならない感じです。

[hentaiman]

それ聞いちゃうと無償なこちらとしては気持ち的にアドバイスし兼ねますが、メンターのアドバイスの仕方が酷過ぎますのでメンター変えられるなら変えてもらった方が良いと思いますよ
意地悪なのかレベルが低くてまともな指導が出来ないのか知らないけど、今割り当てられている有料メンターさんはレベル低過ぎると思うわ

[extend06]

失礼なことをしてしまい、申し訳ありません。
今現在、ここの回答で頂いているshun-Kさんのアドバイスを基に作成しています。
皆さんの貴重なお時間を無償で相談に乗っていただき、本当にありがとうございます。
hentaimanさんも心配してくださって、本当にありがとうございます。

Answer 2

無事解決することができましたので、ご報告させていただきます。
コードは、下記になります。

@section('content')
<form id="choice">
  <label><input type="radio" name="select" value="0" onclick="change();" checked>すべて</label>
  <label><input type="radio" name="select" value="1" onclick="change();">作業中</label>
  <label><input type="radio" name="select" value="2" onclick="change();">完了</label>
</form>
  <table>
  <thead>
    <tr>
    <th>ID</th>
    <th>コメント</th>
    <th>状態</th>
  </tr>
  </thead>
  <tbody>
  @foreach($items as $item)
    <tr class="tasks">
      <td>{{$loop->iteration}}</td>
      <td>{{$item->title}}</td>
      <form id ="task" action="/todos/boolean/{{$item->id}}" method="post">
      @csrf
        @if($item->status === 0)
        <td><input class="unCompleted" name="task_btn" type="submit" value="作業中"></td>
        <input type="hidden" name="status" value="1">
        @else
        <td><input class="completed" name="task_btn" type="submit" value="完了"></td>
        <input type="hidden" name="status" value="0">
        @endif
      </form>
      <td>
        <form action="/todos/{{$item->id}}" method="post">
          @csrf
        <input type="hidden" name="id" value="{{$item->id}}">
        <input type="submit" value="削除">
        </form>
      </td>
    </tr>
  @endforeach
  </tbody>
  </table>

function change() {
radio = document.getElementsByName('select');
console.log(radio);
let completes = document.querySelectorAll('.completed');
console.log(completes);
let unCompletes = document.querySelectorAll('.unCompleted');
console.log(unCompletes);
let tasks = document.querySelectorAll('.tasks');


  if(radio[1].checked) {
    unCompletes.forEach(item => {
      item.closest('.tasks').style.display = "";
    }); 
    completes.forEach(item => {
      item.closest('.tasks').style.display = "none"; 
    });
  } else if(radio[2].checked) {
    unCompletes.forEach(item => {
      item.closest('.tasks').style.display = "none";
    }); 
    completes.forEach(item => {
      item.closest('.tasks').style.display = "";
    });
  } else if(radio[0].checked) {
    tasks.forEach(item => {
      item.closest('.tasks').style.display = "";
    });
  }
}