0

●目標
現状では、チェックボックスの状態がリロード後は、リセットさせるようになってます。
こちらをリセットされず、リロード前にチェックされている状態をリロード後もそのまま保持できるようにしたいです。

●試したこと
cookieに保存する等の方法があるそうですが、できることであれば、JavaScript、phpのコードを書くことによって、保持できるようにしたいです。

document.getElementById('button').addEventListener('click', () => {
  let targets = document.querySelectorAll(`input[type='checkbox'][name='check']`);
  for (const i of targets) {
    i.checked = false;
  }
});
body {
  font-family: helvetica arial, "BIZ UDPGothic", sans-serif;
}

h1 {
  color: white;
  background-color: deeppink;
  text-align: center;
  padding: 20px 10px;
  margin: 0 100px;
  font-size: 30px;
}


/*  @media screen and (max-width:768px) {
        h1{
    color: white;
    background-color: deeppink;
    text-align: center;
    padding: 20px 10px;
    margin: 0 100px;
    font-size: 30px;
        }
    }  */

ul {
  list-style: none;
  margin-left: 100px;
}

li {
  padding-bottom: 10px;
}

input[type=checkbox]:checked+label.strikethrough {
  text-decoration: line-through;
  color: #ccc;
}

.btn {
  font-size: 20px;
  color: white;
  background: #239b76;
  width: 250px;
  padding: 20px;
  border: none;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  opacity: 1;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.8;
}

</style>
<h1>チェックリスト</h1>
<ul>
  <li>
    <input type="checkbox" name="check" value="1">
    <label class="strikethrough">A</label>
  </li>

  <li>
    <input type="checkbox" name="check" value="1">
    <label class="strikethrough">B</label>
  </li>

  <li>
    <input type="checkbox" name="check" value="1">
    <label class="strikethrough">C</label>
  </li>

  <li>
    <input type="checkbox" name="check" value="1">
    <label class="strikethrough">D</label>
  </li>

</ul>


<input type="button" id="button" class="btn" value="全てのチェックを外す">

チェックボックスのページ

2
  • 2
    JavasciptやPHPといったプログラミング言語は来たデータを処理し出力するということに特化したものです。それ単品ではデータや状態を保存したりということはできません。ブラウザのCookieやローカルストレージ、サーバのセッションやDB等のストレージと連携して「状態維持」の実装する必要があります。もしくはブラウザのキャッシュ機能を有効にするという方法がありますが、あまりお勧めできません。ちなみにどのストレージを選んでもPHPやjavascriptがそれらのストレージと連携して実装することになります
    – keitaro_so
    Commented 2022年1月26日 5:04
  • チェックの状態をローカルファイルに保存しておき、リロード時に読み込めばいいと思います。cyzennt.co.jp/blog/2021/02/04/… Commented 2022年1月27日 0:54

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。