何度もご丁寧なご返答ありがとうございます。
このコードで希望の通りに動作しました！ほんとうに感謝いたします。
-
この返信は5年、 9ヶ月前に
riverが編集しました。
もう一つ問題が発生しました。遷移が絡んで思っていた以上に複雑なようで、度々、解決を撤回して申し訳ございません。
[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) していますが・・・
確認ページのソースを確認してみてください。
ご返信ありがとうございます。
サンプルコードの通りの記載で、チェックがない場合はキチンと非表示になります。
しかし、そのまま確認画面に進むと、表示になってしまいます。
開発者ツールで確認画面を確認すると、何故か.boxのdisplay: none;が無効（横線が入っている）になり、
element.style {display: block;}となっています。
ただ、<div class=”box”></box>の中のチェックボックスは表示されず、テキストやCSSによる背景色が表示されています。
input[name=”ivent[data]”] が確認画面の処理です。
なお、サンプルコードはそのままでは動作しないかもしれません。理解した上でご自身でコーディングしてください。
コードに間違いがありました。下記のように変更してください。
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は必須でいずれかのチェックが１つ必要です。（分けたのは、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) {
最後のご返信と前後して送信していたのですが、「この投稿は自動化システムにより承認待ちとなっています。モデレーターが手動でレビューします。」とのメッセージが出ていました。スパム判定なのでしょうか。（送信されていないかもしれません）
ご教示いただいた内容で試してみます。
ありがとうございます。
if ($('input[value="d"]').length) {
で上手く動作しました。（B,Cチェックで、開閉部分が非表示になった）
そこで、また別の問題（以下※）が起きたのですが、
①チェックボックスAだけにチェック、開閉部分のラジオボタンにチェック→確認画面に反映(.box表示）
②チェックボックスBまたはCにチェック→確認画面に反映（開閉部分関係なし）
※③チェックボックスAかつ、チェックボックスBまたはCにチェック、さらに開閉部分のラジオボタンにチェック→確認画面でラジオボタンが反映されない(.box表示されない）
条件分岐が複雑でコードを見てもよく分からないのですが、またBまたはCにチェックでアクションの重複があるのでしょうか。
-
この返信は5年、 9ヶ月前にriverが編集しました。
-
この返信は5年、 9ヶ月前にriverが編集しました。
-
この返信は5年、 9ヶ月前にriverが編集しました。
すみません、私には分かりません。
サンプルコードにコメントを付けたので参考にしてください。
// #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 を非表示
}
}
