サポート » プラグイン » MW WP Formのチェックボックスに連動させて表示、非表示を切り替えたい

  • 解決済 mountain22

    (@jpairb)


    MW WP Formを使わせていただいています。
    jQueryを利用し、フォームでチェックボックスのチェックの有り、無しに連動させて、表示、非表示の切り替えを行いたいです。
    以下のサイトを参考に後述のコードをmwform編集画面に記載しましたが、テキスト「チェックした時に表示」が表示されたままで動きがありません。
    https://qiita.com/kazu56/items/9112737c9511148c5cfe

    WP初心者で根本的なことが間違っているかもしれませんが、どなたかご教示いただけましたら幸いです。

    WordPressはVer5.0.2です。
    サイトでは、lightbox.jsなど jQueryプラグインは問題なく動作しています。今回もlightbox.jsと同様のやり方(function.phpに記載)でjsファイルを呼び出しています。

    【mwform編集画面での記載内容】
    [mwform_checkbox name=”ivent” children=”参加する” id=”checkbox”]
    <div class=”box”>チェックした時に表示</div>

    【jQuery】外部ファイル(子テーマ)
    $(function(){
    $(‘#checkbox’).change(function(){
    $(‘.box’).toggle();
    })
    })

15件の返信を表示中 - 16 - 30件目 (全40件中)
  • 何度もご丁寧なご返答ありがとうございます。
    このコードで希望の通りに動作しました!ほんとうに感謝いたします。

    • この返信は9 ヶ月、 3 週間前に  mountain22 さんが編集しました。

    もう一つ問題が発生しました。遷移が絡んで思っていた以上に複雑なようで、度々、解決を撤回して申し訳ございません。

    [mwform_checkbox name=”ivent” children=”参加する” id=”checkbox”]…チェックボックスA
    <div class=”box”>
    チェックした時に表示する内容
    【ラジオボタンB】
    【ラジオボタンC】
    </div>

    おかげ様で、上記のチェックの有無でboxの開閉がうまくいき、Aをチェックし、ラジオボタンBCをチェックした場合、確認画面に反映されます。
    しかし、Aにチェックを入れない場合、入力画面ではBOXが閉じているのですが、確認画面では、BOX内のラジオボタン以外の内容(テキスト、CSSで付けた背景色等)が表示されてしまいます。
    class=”box”には、cssでdisplay: none; を付与しているので表示されないはずですが、原因が分からず困っています。

    提示したサンプルコードでは、A にチェックがない (input[name=”ivent[data]”] がない) 場合、BOX (.box) を非表示 (hide) していますが・・・
    確認ページのソースを確認してみてください。

    • この返信は9 ヶ月、 3 週間前に  ishitaka さんが編集しました。

    ご返信ありがとうございます。
    サンプルコードの通りの記載で、チェックがない場合はキチンと非表示になります。
    しかし、そのまま確認画面に進むと、表示になってしまいます。
    開発者ツールで確認画面を確認すると、何故か.boxのdisplay: none;が無効(横線が入っている)になり、
    element.style {display: block;}となっています。
    ただ、<div class=”box”></box>の中のチェックボックスは表示されず、テキストやCSSによる背景色が表示されています。

    input[name=”ivent[data]”] が確認画面の処理です。
    なお、サンプルコードはそのままでは動作しないかもしれません。理解した上でご自身でコーディングしてください。

    • この返信は9 ヶ月、 3 週間前に  ishitaka さんが編集しました。

    コードに間違いがありました。下記のように変更してください。

    if ($('input[name="ivent[data]"').length) {

    if ($('input[name="ivent[data]"]').length) {

    コードが理解できない部分がありすみません、確認画面用のinput[name=”ivent[data]”] の部分が変わる場合があるということでしょうか。

    チェックボックスにチェックを入れ、開いた中のラジオボタンにもチェックを入れた場合に、確認、送信メールに反映されているので、記載は正しいと思っていました。

    確認画面には、どのような HTML が出力されていますか?

    最初のチェックを外した状態で、確認にすすむと
    <div style=”display: none;” class=”box”>内容</div>のdisplay: none;が消え、
    <div style class=”box”>のようになっています。

    前回は深夜にありがとうございました。
    以下は、今回の件とは関係ないと思い記載していなかった内容ですが、どうでしょうか。
    [mwform_checkbox name=”ivent” children=”a,b,c”]…チェックボックスB
    [mwform_checkbox name=”ivent” children=”d” id=”checkbox”]…チェックボックスA(既出)
    <div class=”box”>
    ※チェックした時に表示する内容
     説明のテキスト
    【ラジオボタンB】【ラジオボタンC】
    </div>
    [mwform_checkbox name=”ivent” children=”e,f,g”]…チェックボックスC

    他にチェックボックスB,Cがあり、同一グループ(ivent)です。iventは必須でいずれかのチェックが1つ必要です。(分けたのは、Aの項目を選択した場合にだけAの直下に開閉させたいためです。)
    今回問題なのは、Aにチェックせず、BかCにチェックして、確認画面に進んだ場合です。
    idはAだけに付けています。

    確認画面にて、チェックボックスA のチェックは、

    $('input[name="ivent[data]"]').length

    で判定しています。
    ivent[data] が重複します。
    もう一度、確認画面のページのソースを確認してみてください。

    確認画面の判定を、name ではなく value でセレクトするのもいいかもしれません。

    if ($('input[name="ivent[data]"]').length) {

    if ($('input[value="d"]').length) {

    • この返信は9 ヶ月、 3 週間前に  ishitaka さんが編集しました。

    最後のご返信と前後して送信していたのですが、「この投稿は自動化システムにより承認待ちとなっています。モデレーターが手動でレビューします。」とのメッセージが出ていました。スパム判定なのでしょうか。(送信されていないかもしれません)
    ご教示いただいた内容で試してみます。

    ありがとうございます。
    if ($('input[value="d"]').length) {
    で上手く動作しました。(B,Cチェックで、開閉部分が非表示になった)
    そこで、また別の問題(以下※)が起きたのですが、
    ①チェックボックスAだけにチェック、開閉部分のラジオボタンにチェック→確認画面に反映(.box表示)
    ②チェックボックスBまたはCにチェック→確認画面に反映(開閉部分関係なし)
    ※③チェックボックスAかつ、チェックボックスBまたはCにチェック、さらに開閉部分のラジオボタンにチェック→確認画面でラジオボタンが反映されない(.box表示されない)

    条件分岐が複雑でコードを見てもよく分からないのですが、またBまたはCにチェックでアクションの重複があるのでしょうか。

    • この返信は9 ヶ月、 3 週間前に  mountain22 さんが編集しました。
    • この返信は9 ヶ月、 3 週間前に  mountain22 さんが編集しました。
    • この返信は9 ヶ月、 3 週間前に  mountain22 さんが編集しました。

    すみません、私には分かりません。

    サンプルコードにコメントを付けたので参考にしてください。

    // #checkbpox1 が存在するかどうか?
    if (checkbox.length) {
    	// #checkbpox1 あり
    
    	if (checkbox.prop("checked")) {
    		$(".box").show();
    	} else {
    		$(".box").hide();
    	}
    } else {
    	// #checkbpox1 なし(確認画面)
    
    	// 値が d の要素が存在するかどうか?
    	if ($('input[value="d"]').length) {
    		$(".box").show(); // .box を表示
    	} else {
    		$(".box").hide(); // .box を非表示
    	}
    }
15件の返信を表示中 - 16 - 30件目 (全40件中)
  • トピック「MW WP Formのチェックボックスに連動させて表示、非表示を切り替えたい」には新たに返信することはできません。