チェックボックスのチェックで入力フォームを開閉し、POSTで受け取っても同じ状態を維持させるには？

お世話になります。
PHPで投稿フォームを作っております。

その中の機能で、ある一部の範囲をチェックボックスへのチェックで開閉できる機能を付けています。

しかし、デフォルト閉じていたものを開いた場合など（またはその逆）、チェックボックスの操作で開いたもの（またはその逆）は、POSTで送信したとき、その状態を維持することが出来ません。開いた状態で送信するとデフォルトの状態（閉じた状態）となります。

php

<?php
if(isset($_POST["opinion"])){
	$checked = "checked";
}
?>

<form action="./" method="post" id="mainForm" name="mainForm">
<input type="checkbox" id="checkCmt" name="opinion" <?php echo $checked; ?>>意見を書く
<br />
<p id="uComment"><input type="text" name="Comment" value="<?php echo $Comment; ?>"></p>

<input type="submit" value="submit">
</form>

window.onload = function(){
	document.getElementById("checkCmt").onclick = function(){
		if (this.checked) {
			document.getElementById("uComment").style.display = "block";
		}else{
			document.getElementById("uComment").style.display = "";
		}
	}
}

javascriptの知識が無いに等しい中で、javascriptという性質上、「チェックボックスにチャックが入ったときにイベントが発生するのだからPOSTしたものを引き継ぐことが出来ない？」などと思いながら、調べていますがここ数日立ち止まったままでで動けずにおります。

お忙しい中恐縮ですがアドバイスのほど頂戴できれば幸いです。
よろしくお願いいたします。

■現在のコード

<?php

if(isset($_POST["submit"]) AND isset($_POST["opinion"])){

	$checked = "checked";
}

?>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script>
<!--
window.onload = function(){
	document.getElementById("checkCmt").onclick = function(){
		if (this.checked) {
			document.getElementById("uComment").style.display = "block";
		}else{
			document.getElementById("uComment").style.display = "";
		}
	}
}


let check = function(){
    let chbx = document.getElementById("checkCmt");
    if (chbx.checked) {
        document.getElementById("uComment").style.display = "block";
    }else{
        document.getElementById("uComment").style.display = "none";
    }

}

window.onload = check;

document.getElementById("checkCmt").onclick = check;

-->
</script>
<style>
<!--
#uComment {
	display:none;
}
-->
</style>
</head>
<body>



<form action="./test4.php" method="post" id="mainForm" name="mainForm">
<input type="checkbox" id="checkCmt" name="opinion" <?php echo $checked; ?>>意見を書く
<br />
<p id="uComment"><input type="text" name="Comment" value="<?php echo $Comment; ?>"></p>

<input type="submit" name="submit" value="submit">
</form>




</body>
</html>

m.ts10806

2020/05/03 03:35

JavaScriptなしではどうでしょう。

行動規範の内容に同意します

回答1件

共通関数化すれば良いと思います。

js
1let check = function(){
2	let chbx = document.getElementById("checkCmt");
3    if (chbx.checked) {
4        document.getElementById("uComment").style.display = "block";
5    }else{
6        document.getElementById("uComment").style.display = "none";
7    }
8
9}
10
11window.onload = check;
12
13document.getElementById("checkCmt").onclick = check;

JavaScriptだけでやりきるのが難しければ「開いた」「閉じた」をhiddenで値を切り替えてPHP側でstyleを付け替えするのもありです。

投稿2020/05/03 04:09

m.ts10806

総合スコア80875

chapp

2020/05/03 06:16

m.ts10806さんおやすみのところ、早々のご回答ありがとうございます。大変恐縮ですが、ご提示いただいたjavascriptは質問欄に記載したものと入れ替える？それとも付け加える？お恥ずかしながら、理解が出来ずにうまく動いてくれません。それと、 > 「開いた」「閉じた」をhiddenで値を切り替えてPHP側でstyleを付け替え... とのこと。大変興味深いです。もう少し具体的にアドバイスいただけますでしょうか？何から何まで申し訳ありません。よろしくお願いいたします。

m.ts10806

2020/05/03 06:22

結局どのようにしたのでしょうか。「うまく動かない」だけではこちらの意図通りに対処されたかが分かりません。 >「開いた」「閉じた」をhiddenで値を切り替え inputだとフォーム送信で送信できるのでhiddenでなんでもいいです。例えば開いてたら1 閉じてたら0をJavaScript実行時に書き換えるようにしておけば、0または1が送信されます。あとはPHPで、0の時はstyle="dislay:none;"を出力し、1のときはstyle="dislay:block;"を出力することになります。まず、やってみてください。要件さえ満たせるのであればあとは「考え方」なので、方法は1つだけではありません。

chapp

2020/05/03 07:33

> 「うまく動かない」だけでは... 仰る通りですね。失礼しました。質問時のままですと、初めにチェックはされておらずフォームは閉じたままとなっており、チェックを付けて開くも、POSTするとチェックは付くものの閉じたままとなっています。ご提示いただいたスクリプトを動かすと、POSTデータを受取り、きちんとチェックボックスの状態によりフォームの開閉はされているのですが、手動によるチェックに対しては開閉が出来ない状態です。スクリプトを見比べ、動作をイメージしながら触ってはいるのですが私の知識では上手くいかずで・・。 hiddenによる開閉の件、なるほどですね、仰っている内容理解出来ました。視野が狭く思いつきませんでしたが、こちらも探ってみたいと思います。引き続い、ご指導いただければ幸いです。よろしくお願いいたします。

m.ts10806

2020/05/03 07:35

いえ、ですから、改変後のコードを提示してください。文章による説明より伝わることは多いです。質問本文に追記してください。

chapp

2020/05/03 08:07

恐れ入ります。ただいま追記いたしました。

m.ts10806

2020/05/03 08:08

自身が書かれたコードは不要ですね。

m.ts10806

2020/05/03 08:09

回答に書いたように「共通関数を作る」ことで、 onloadとonclickで同じ動作をさせていますので、元のコードがあるとおかしくなります。 ※これはJavaScriptに限らずPHPでも同じかと思います。

chapp

2020/05/03 08:19

恐れいります。実は、当初のコード（javascript部）を省き、ご提示いただいたコードと差し替えたのですが、手動によるチェックに反応しない状況でした・・。単純に先にお示ししたコードから window.onload = function(){ document.getElementById("checkCmt").onclick = function(){ if (this.checked) { document.getElementById("uComment").style.display = "block"; }else{ document.getElementById("uComment").style.display = ""; } } } を省いたものです。

行動規範の内容に同意します