チェックリストにイベントを追加したい

Question

###前提・実現したいこと

JavaScriptの勉強で、チェックリストを作っています。li要素にクリックイベントを実装しようとしたところ問題が発生しました。

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

以下のli要素のチェックボックスにチェックを付けたら、削除線が追加され、チェックを外すとその削除線も消えるといったイベントを実装したいのですが、一番上部のOA機器会社の要素にしか、イベントが発生しません。

該当のソースコード

  <ul id="foo" class="js-todoList">
      <li class="check"><input type="checkbox">OA機器会社</input></li>
      <li class="check"><input type="checkbox">コンピュータ会社</input></li>
      <li class="check"><input type="checkbox">保険会社</input></li>
      <li class="check"><input type="checkbox">取引銀行</input></li>
      <li class="check"><input type="checkbox">定期購読新聞・雑誌</input></li>
      <li class="check"><input type="checkbox">加入団体</input></li>
      <li class="check"><input type="checkbox">法務局</input></li>
      <li class="check"><input type="checkbox">税務局</input></li>
      <li class="check"><input type="checkbox">社会保険事務所</input></li>
      <li class="check"><input type="checkbox">労働基準監督署</input></li>
      <li class="check"><input type="checkbox">郵便局</input></li>
      <li class="check"><input type="checkbox">公共職業安定所</input></li>
    </ul>

.check{
  text-decoration: none;
}
.checked{
  text-decoration: line-through;
}

var foo =document.querySelector('.check');
      foo.onclick = function toggleStyle() {
        this.className = (this.className === 'check') ? 'checked' : 'check';
      };

試したこと

配列にして要素を渡して実行してみましたが、そもそも表示されなくなってしまいました。

補足情報（FW/ツールのバージョンなど）

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

Answer 1

こういうことですか？

<style>
.js-todoList input:checked+span{
  text-decoration: line-through;
}
</style>
<script>
</script>
<ul id="foo" class="js-todoList">
  <li><label><input type="checkbox"><span>OA機器会社</span></label></li>
  <li><label><input type="checkbox"><span>コンピュータ会社</span></label></li>
  <li><label><input type="checkbox"><span>保険会社</span></label></li>
  <li><label><input type="checkbox"><span>取引銀行</span></label></li>
  <li><label><input type="checkbox"><span>定期購読新聞・雑誌</span></label></li>
  <li><label><input type="checkbox"><span>加入団体</span></label></li>
  <li><label><input type="checkbox"><span>法務局</span></label></li>
  <li><label><input type="checkbox"><span>税務局</span></label></li>
  <li><label><input type="checkbox"><span>社会保険事務所</span></label></li>
  <li><label><input type="checkbox"><span>労働基準監督署</span></label></li>
  <li><label><input type="checkbox"><span>郵便局</span></label></li>
  <li><label><input type="checkbox"><span>公共職業安定所</span></label></li>
</ul>

js sample

どうしてもjsでやりたい場合はこう

<style>
.checked{
  text-decoration: line-through;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  [].forEach.call(document.querySelectorAll('#foo [type=checkbox]'),x=>{
    x.addEventListener('change',e=>{
      e.target.closest('label').classList.toggle('checked',e.target.checked);
    });
  });
});
</script>
<ul id="foo" class="js-todoList">
  <li><label><input type="checkbox">OA機器会社</label></li>
  <li><label><input type="checkbox">コンピュータ会社</label></li>
  <li><label><input type="checkbox">保険会社</label></li>
  <li><label><input type="checkbox">取引銀行</label></li>
  <li><label><input type="checkbox">定期購読新聞・雑誌</label></li>
  <li><label><input type="checkbox">加入団体</label></li>
  <li><label><input type="checkbox">法務局</label></li>
  <li><label><input type="checkbox">税務局</label></li>
  <li><label><input type="checkbox">社会保険事務所</label></li>
  <li><label><input type="checkbox">労働基準監督署</label></li>
  <li><label><input type="checkbox">郵便局</label></li>
  <li><label><input type="checkbox">公共職業安定所</label></li>
</ul>

Comments

[ytmcox]

cssとjsの方どちらも実行できました。親切に答えてくださり、ありがとうございました。

Answer 2

一番上部のOA機器会社の要素にしか、イベントが発生しません。

Document.QuerySelectorはセレクタに一致する最初の要素のみを返すため、一番上の要素にしかイベントが設定できていません。
複数の要素に対してイベントを設定するにはDocument.querySelectorAll等を使用して対象のすべての要素を取得し、ループでイベントを設定してください。