ｊQueryのclick(function()が動かない・・・？

質問

お世話になります。
JS初心者ですが、jQueryに手を出し勉強しているものです。

勉強の過程で登録フォームを作成しているのですが、

1. 登録フォーム1
2. 登録フォーム2
3. 確認画面
4. 完了画面

という流れになるようにPHP+jQueryでフォームを作成しています。
1と2の間で入力エラーがあった場合には、1のフォーム上に赤文字でエラー内容が表示。
2と3の間で入力エラーがあった場合には2のフォーム上でエラー表示。
としています。
更に1のフォーム上では、jQueryを使いフォームの一部をラジオボックスと
連動し表示・非表示が出来るようにしています。

そこで質問の内容なのですが、以下のコードで書くと、
1と2の間でエラーがあり、1のフォームに戻ってきた際に
ラジオボックスで「表示する」を選択していて、
値もちゃんと「表示する」となっているのに、表示したい部分が
非表示になってしまいます。
PHPでのエラー処理で値はちゃんと持ってきていることは確認しましたが、、、

宜しくお願いします。

---- ↓jQuery部分ソース ---------------------------------------------

<script type="text/javascript">
　$(function(){
$("#haiso").hide();

$("#show").click(function(){
$("#haiso").show(500);
});
$("#hide").click(function(){
$("#haiso").hide(500);
});
$("#haiso").hide(500);
});
</script>

---------------------------------------------------------------------
---- ↓HTML部分ソース -----------------------------------------------
　　<table>
　　　<tr>
　　　　<td>表示選択</td>
　　　　<td>

　　　　<!-- 表示選択エラー処理 -->
　　　　<?
if ($_POST['samecheck'] == 1){
　echo '<label for="hide">非表示</label>
　　　　<input type="radio" name="samecheck" value="1" checked="checked" id="hide">
　　　　<label for="show">非表示</label>
　　　　<input type="radio" name="samecheck" value="2" id="show"></td></tr>';

} elseif ($_POST['samecheck'] == 2) {
　echo '<label for="hide">非表示</label>
　　　　<input type="radio" name="samecheck" value="1" id="hide">
　　　　<label for="show">非表示</label>
　　　　<input type="radio" name="samecheck" value="2" checked="checked" id="show"></td></tr>';

} else {
　　　　echo '<label for="hide">非表示</label>
　　　　<input type="radio" name="samecheck" value="1" checked="checked" id="hide">
　　　　<label for="show">非表示</label>
　　　　<input type="radio" name="samecheck" value="2" id="show"></td></tr>';
}
　　　　?>

　　　　</td>
　　　</tr>
　　</table>

　　<div id="haiso">
　　　<table>
　　　</table>
　　</div>
---------------------------------------------------------------------

回答No.2

fujillin · ベストアンサー

＃1です。

＞はじめの、
＞> $("#haiso").hide();
＞を書いておかないと、一度表示された状態から閉じるような
＞ページアクションが起こってしまい不恰好だったので、
＞こういう記述をしました。
2番目の意味が不明です。（あっても、今のところ悪さはしてないけど…）

＞前述のように初回表示時は表示されなくて良いのですが、
＞（samecheckが1になるようにCheckedタグを入れているため）
＞エラーで返ってきた際に、samecheckが2を選択していても、
＞ページロード時に表示されず困っているのです。。
2回目もphpから送り直しているのでしょうから、＃1にも書きましたように『ページロード時』に実行されているのは、samecheckに関係なく、常に
非表示の処理です。
それなので、非表示になるのはまったく不自然ではありません。

スクリプトでその処理をしたいのなら、初回でも2回目でも（あるいは3回目でも）、ロード時に状態を判断して、表示/非表示を操作するようにしなければだめなはずでは？（現状は、常に非表示にしている）

あるいは、別の発想としてphp側で対象divの表示状態を制御してあげれば、スクリプト側はイベント処理のみでもよくなりますよね？
（jqueryのshow()、hide()はdisplay属性の設定を行っていたと思いますので、php側で属性をセットしてあげれば、スクリプトでは何もしなくても良くなります。）
　↑jqueryの内容を確認していないので、ちょっと曖昧

補足

> 2番目の意味が不明です。（あっても、今のところ悪さはしてないけど…）

あっ。。

1　$("#hide").click(function(){
2　$("#haiso").hide(500);
3　});
4　$("#haiso").hide(500);
5　});
6　</script>

の4の部分が意味不明ということですよね？
すみません。。私も意味不明でした。何故か入っていたので、
消しておきました。

> それなので、非表示になるのはまったく不自然ではありません。

ようやく意味が理解できました！
JSすらまともに書けないのに、いきなりjQueryに手を出したばかりに
とんちんかんなことを言ってしまい、申し訳ありません。

jQuery側でどうこうする処理を今すぐには思い浮かばなかったのですが、
PHP側でエラー処理を返す時に条件分岐させることでとりあえずは、
思い通りに動くようになりました。

ただ、jQueryで動かせないと勉強の意味がないので、
引き続き勉強しようと思います。

一旦は解決したということで、とんちんかんな質問に
お答えいただきありがとうございました！！！

回答No.1

fujillin

ご質問の意味を把握できてないけど…

＞表示したい部分が非表示になってしまいます。
表示したい部分ってどこのことでしょうか？
<div id="haiso">のことなのかなぁ？

だとすれば、スクリプトでロード時に実行されているのは、
$("#haiso").hide();
$("#haiso").hide(500);
なので、表示されなくて当然ですよね？
（同じ処理を2回書いている意味も不明ですが…）

補足

すみません。。説明が下手で。。

-------------------------
　　<div id="haiso">
　　　<table>
　　　</table>
　　</div>
-------------------------

↑の部分が表示したい部分で、テーブルの中身は
本当はあるのですが文字数の関係で省略してしまいました。

> だとすれば、スクリプトでロード時に実行されているのは、
> $("#haiso").hide();
> $("#haiso").hide(500);
> なので、表示されなくて当然ですよね？
> （同じ処理を2回書いている意味も不明ですが…）

同じ処理を２回書いているのですが、
はじめの、

> $("#haiso").hide();

を書いておかないと、一度表示された状態から閉じるような
ページアクションが起こってしまい不恰好だったので、
こういう記述をしました。

前述のように初回表示時は表示されなくて良いのですが、
（samecheckが1になるようにCheckedタグを入れているため）
エラーで返ってきた際に、samecheckが2を選択していても、
ページロード時に表示されず困っているのです。。