MW WP Formのチェックボックスに連動させて表示、非表示を切り替えたい
-
MW WP Formを使わせていただいています。
jQueryを利用し、フォームでチェックボックスのチェックの有り、無しに連動させて、表示、非表示の切り替えを行いたいです。
以下のサイトを参考に後述のコードをmwform編集画面に記載しましたが、テキスト「チェックした時に表示」が表示されたままで動きがありません。
https://qiita.com/kazu56/items/9112737c9511148c5cfeWP初心者で根本的なことが間違っているかもしれませんが、どなたかご教示いただけましたら幸いです。
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();
})
})
-
ishitaka様、munyagu様 ご丁寧にご返信ありがとうございます。
ソースでIDがcheckbox-1になっていることが確認できました。
しかし、ファイルを変更してみましたが動作しません。
教えていただいたコードをコピーしてform-open.jsというファイルにして、子テーマ/assets/jsにアップ。
function.phpに以下コードを記載しています。（現在、動作している他のjsファイルと同様の方法です）【function.php】
add_action( ‘wp_enqueue_scripts’, function() {
wp_enqueue_script(
get_stylesheet(),
get_theme_file_uri( ‘/assets/js/form-open.js’ ),
[ get_template() ],
false,
true
);
} );【form-open.js】
jQuery(function($) {
$(“#checkbox-1”).change(function() {
$(“.box”).toggle();
});
});開発者ツールのconsoleで確認したら、何もエラーが出ておらず、全く読み込んでいないかもしれないと、以下のコードでMWFORMや固定ページに直接記載したところ404エラーが出ていました。
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>
<script src=”/assets/js/form-open.js”></script>基本的なことで恐縮ですが、JSの読み込み方が間違っているのでしょうか。
一旦解決したのですが、実際にフォームを稼働させた際に問題が起きてしまいました。
先にチェックを入れるとテキストが表示されるコードをご教示いただきましたが、実際にはテキスト部分に別の選択項目（ラジオボタン）を入れる必要があり、試みたところ、チェックの有無による最初の表示はうまくいったのですが、確認画面に移行した際に、その内容が反映されませんでした。①イベントＡにチェック（チェックボックス・1項目）
②食事を選択するリストＢが表示（ラジオボタン・複数項目）
③選択肢の中から１つにチェック
④確認画面へ移行④の際にイベントＡのチェックが反映されますが、Ｂは反映されませんでした。
前の画面に戻ると、ＡにチェックするとＢが消え、チェックを外すと表示と、動作が逆になってしまいました。
遷移が絡むと、動作が思うようにいかないようです。もし、解決策等ありましたらご教示いただけませんでしょうか。
jQuery(function($) { var checkbox = $("#checkbox-1"), checkbox_change = function () { if (checkbox.length) { if (checkbox.prop("checked")) { $(".box").show(); } else { $(".box").hide(); } } else { if ($('input[name="ivent[data]"').length) { $(".box").show(); } else { $(".box").hide(); } } }; checkbox_change(); checkbox.change(checkbox_change); });ではどうでしょうか。
なお、コードはあくまでもサンプルです。そのままでは動作しないかもしれません。ご自身で理解した上でコーディングしてください。
- トピック「MW WP Formのチェックボックスに連動させて表示、非表示を切り替えたい」には新たに返信することはできません。