更新直前のcheckboxの状態(チェックの有無)を保持して、更新後にもそのcheckboxの状態(チェックの有無)を引き継ぐ方法

Question

今現在、PHPの勉強の一環として、掲示板のようなものを作成しております。
タイトルにあるようなことがわからず、困っております。
チェックボックスのチェックの有無に応じて、ページの表示パターンを切り替えたいです。
クッキーに保存する処理で実装を試みましたが、だめでした。

以下、コードを記載いたします。

  <form method="post">
    　<!-- ここから下は今回実装したいこととは関係ありません。 -->
   　 <input type="hidden" name="default_point" value="">
      <input type="text" name="input_nickname" class="input_nickname" value="<?php echo htmlspecialchars($_SESSION['nickname'], ENT_QUOTES, 'UTF-8'); ?>" placeholder="ニックネームを入力"><br/>
      <p class="error_log nickname_error">ニックネームを入力してください。</p>
      <textarea class="input_comment" name="input_comment" rows="1" placeholder="コメントを入力" spellcheck="false"><?php if (isset($_SESSION['comment'])) { echo htmlspecialchars($_SESSION['comment'], ENT_QUOTES, 'UTF-8'); } ?></textarea><br/>
      <p class="error_log comment_error">コメントを入力してください。</p>
      <input type="submit" name="submit_comment" value="&#xf044; 書き込む" class="fas">
      <!-- ここのcheckboxをどうにかしたい -->
      <input type="checkbox" name="new_comment" class="new_comment" id="checkbox">常に最新のコメントを表示
  </form>

// クッキーセット
function setCookie($cookieName, $cookieValue, $days) {
  var $dateObj = new Date();
  $dateObj.setTime($dateObj.getTime() + ($days * 24 * 60 * 60 * 1000));
  var $expires = "expires=" + $dateObj.toGMTString();
  document.cookie = $cookieName + "=" + $cookieValue + "; " + $expires;
}

// クッキー削除
function deleteCookie($cookieName) {
  document.cookie = $cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}

// クッキーの値を返す
function getCookie($cookieName){
  var $cookies = document.cookie.split(';');
  for( var $i=0; $i < $cookies.length; $i++ ){
    var $cookie = $cookies[$i].trim().split( '=' );
    if( $cookie[0] == $cookieName ){
        return $cookie[1];
    }
  }
}

$(function() {
  // 以下(*1)でセットするクッキーに関する条件分岐 else以下が実行される
  if (getCookie("checked") == true) {
    document.getElementById('checkbox').checked = true;
  } else {
    console.log('if文がうまくいってない');
  }

  // 以下(*2)でセットするクッキーに関する条件分岐 else以下が実行される
  if (getCookie("not_checked") == true) {
    document.getElementById('checkbox').checked = false;
  } else {
    console.log('if文がうまくいってない');
  }

$('#checkbox').on('change', function() {
  if (this.checked) {
    $(this).attr("checked", true);
// *1 ここでクッキーをセット
    setCookie('checked', true, 1);
    deleteCookie('not_checked');
  } else {
    $(this).attr("checked", false);
// *2 ここでクッキーをセット
    setCookie('not_checked', true, 1);
    deleteCookie('checked');
  }
});

if ($('#checkbox').is(':checked')) {
  $('.comment_container').scrollTop($('.comment_container')[0].scrollHeight);
}

こんな感じです。
最後のif文が表示を切り替える処理の部分です。

comment_containerクラスでは、コメントが縦にずらっとoverflowで古い順に表示されている状態で、checkboxの状態(チェックの有無)を保持して、checkboxにチェックが入ってる状態でページが更新されたら、一番下の最新のコメントが表示されるようにしたいと考えております。

クッキーのセットの仕方、削除してる部分など、おかしな点が多々あるかと思いますが、どうかご教授いただけますと幸いです、

また、PHPを勉強中の身であるため、もし可能であれば、PHPでの実装方法も一緒に教えていただけたらなお嬉しいです。
こちらは可能であればで大丈夫です。

どうかよろしくお願いいたします。

Answer 1

<?PHP
$new_comment=filter_input(INPUT_POST,"new_comment");
$checked=["new_comment"=>empty($new_comment)?"":" checked"];
print_r($checked);
?>
<form method="post">
<label><input type="checkbox" name="new_comment" value="1"<?=$checked["new_comment"]?>>常に最新のコメントを表示</label>
<input type="submit" value="send">
</form>

Comments

[dakeo]

だいたい想定通りの動きにすることができました。
ブラウザの更新ボタンから更新される形にしたかったのですが、それは恐らく難しそう？なのでフォームに更新ボタンを設けることにしました。
ご回答ありがとうございました！

Answer 2

checkboxの状態(チェックの有無)を引き継ぐ方法

checkboxはサーバ側でcheckedを付ければチェック状態で表示できます。

【<input type="checkbox"> - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/checkbox#attr-checked

Comments

[dakeo]

拝見させていただきましたが、初心者なもので理解できませんでした。
せっかくご回答いただいたにもかかわらず、申し訳ございません。