0

送信ボタンをクリックした後、チェックボックスを表示しようとしています。しかし、私の jquery スクリプトは、チェックされた div を非表示にします。

フォーム送信後もチェック済みのdivを表示したい。

これは私のHTMLです：

<form action="" method="POST">
<br />
<div id="myDiv">
<input class="check_app" type="checkbox" />
<input class="check_app2" type="checkbox" />
<input class="check_app3" type="checkbox" />
</div>
<div class="hide">blabla</div>

<div class="hide2">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.
</div>
<br />
<button id="submitbutton" type="submit" name="action" value="submit">Send in Request</button> 
</form>

私のJquery

$('.check_app').change(function() {
 if ($(this).attr("checked")) {

    $('.hide').fadeIn();
    return;
 }
 $('.hide').fadeOut();
});

$('.check_app2').change(function() {
 if ($(this).attr("checked")) {

    $('.hide2').fadeIn();
    return;
 }
 $('.hide2').fadeOut();
});

下のCSS

.hide, .hide2 {
  display: none;
}

ここでコードを表示でき ます: http://jsfiddle.net/SolidSmash/7W8Up/ 私の質問が明確でない場合は申し訳ありません。ただし、以下で詳しく説明します。 1. フォーム内にいくつかのチェックボックスがあります 2. これらのチェックボックスは、表示する div (例: class="hide") をトリガーします (通常、これらの div は非表示になっています) 3. チェックボックスがを選択して送信ボタンをクリックすると、表示されていたdivが消えます(フェードアウト)。 チェックボックスによってトリガーされた場合、送信後にdivを保持したいと思います。









4

2 に答える 2

0

あなたはそれを意味しましたか：

ユーザーが 1 つ以上のチェックボックスをオンにして送信をクリックし、サーバー側の処理後にページに戻った場合、同じチェックボックスを選択してそれぞれの DIV を表示したいですか?

もしそうなら、あなたが取ることができるいくつかのアプローチ：

1 - フォーム/ページがサーバーに投稿されたときにサーバー側でチェックされているチェックボックスを決定し、.hide、.hide2 などのクラスをそれぞれの DIV に適用しないでください - チェックされたチェックボックスに基づいて -戻る途中。

2 - 戻る途中で、チェックされたチェックボックスのクリックをトリガーするインライン JavaScript を少し挿入します。送信がクリックされる前に、 class="check_app2" のチェックボックスがチェックされたと仮定しましょう。次に、サーバー側で、チェックされたチェックボックス (この場合は class="check_app2" のチェックボックス) を特定し、次のようなスクリプトを挿入します。

$(".check_app2").trigger("click");

#2 の理由は、ページが読み込まれると DIV がフェードインするようにするためです。チェックボックスのチェック状態をサーバー側に設定しないでください。

また、変更ハンドラーをより一般的で再利用可能なものに変更します。繰り返します。

参照用の追加コード。これが理想的なコードだと言っているのではありません。残念ながら、私は PHP を使用したことがないので、その面で機能するコードを提供することはできません。

HTML

<input data-div-class="hide" class="check_app" type="checkbox" />
<input data-div-class="hide2" class="check_app2" type="checkbox" />
<input class="check_app3" type="checkbox" />

jQuery

function Checkbox_OnChange() {
    var divClass = $(this).data("div-class");
    $("div."+divClass).fadeToggle();
}
$("input[type=checkbox]").on("click", Checkbox_OnChange);
$(".check_app2").trigger("click");

上記の作業をここで見る: http://jsfiddle.net/emgee/pYH8S/

:)

于 2013-06-18T21:51:10.933 に答える