札幌Web制作のシンクグラフィカ

switching.jsでの2段階(入れ子)制御について

クボさん (2021-07-09 16:19:29) samplest.sakura.ne.jp/yoyaku/index.html

参加人数を選んで、表示されたフォームに参加者の情報を表示させて記入をしてもらうようなフォームを作成しています。
switching.jsを使用して、参加者の人数を選択、人数に合わせた情報入力フォームを表示させるところまでは動かせることが出来ました。
表示させた入力フォームのチェックボックスのオンオフで、1人目と同じ内容であれば更に非表示にしたいと思っています。
例)2人目情報フォームの、「1人目と同じ」ボックスにチェックが入ると、その下の住所と電話の入力フォームが消える

人数に合わせたフォームを表示させるところまではうまくいったのですが、
その後のチェックボックスでの非表示・表示の動作がうまくできません。

大変お手数をおかけしますが、切り替える方法をご教授いただけないでしょうか?
何卒よろしくお願いいたします。

switching.jsの内容は下記です。

//人数でフォームを切り替える
function swElementsExample(){
// 2人を選んだ場合
if(mfp.$(’p2’).checked){
mfp.sw(false,’ps2’);
mfp.sw(true,’ps3’,false);

// 3人を選んだ場合
}else if(mfp.$(’p3’).checked){
mfp.sw(false,’ps2’);
mfp.sw(false,’ps3’);

// 1人目の場合
}else{
mfp.sw(true,’ps2’,false);
mfp.sw(true,’ps3’,false);

}
}  //ここまで記述した場合は動く(1段階目)

//ここから下を記述したら1段階目も動かない

function swElementsExample(){
// 2人目のチェックボックスにチェックを入れた場合
if(mfp.$(’2same’).checked){
mfp.sw(true,’info_02’,false);
// 3人目のチェックボックスにチェックを入れた場合
}else if(mfp.$(’3same’).checked){
mfp.sw(true,’info_03’,false);

}else{
mfp.sw(false,’info_02’,true);
mfp.sw(false,’info_03’,true);

}
}

switching.jsの修正

クボさん (2021-07-09 21:38:23) samplest.sakura.ne.jp/yoyaku/index.html

何度も申し訳ございません。
switching.jsの記述がだいぶおかしかったので、下記に修正しましたところ、チェックボックスをチェックすることでの非表示は出来ました。
しかしながら、チェックを外しても項目は非表示のまま、また必須項目も無効にならず、再度入力も出来ず、確認画面の先に進むことが出来ない状態です。

条件の分岐が出来ていないのでしょうか…

大変お手数をお掛け致しますが、ご教示頂けますと幸いです。


//人数でフォームを切り替える
function swElementsExample(){
// 2人を選んだ場合
if(mfp.$(’p2’).checked){
mfp.sw(false,’ps2’);
mfp.sw(true,’ps3’,false);

// 3人を選んだ場合
}else if(mfp.$(’p3’).checked){
mfp.sw(false,’ps2’);
mfp.sw(false,’ps3’);

// 3人を選んだ場合
}else{
mfp.sw(true,’ps2’,false);
mfp.sw(true,’ps3’,false);
}

// 2人目のチェックボックスにチェックを入れた場合
if(mfp.$(’2same’).checked){
mfp.sw(true,’info_02’,false);
}else{
mfp.sw(false,’info_02’,true);
}

// 3人目のチェックボックスにチェックを入れた場合
if(mfp.$(’3same’).checked){
mfp.sw(false,’info_02’,true);
mfp.sw(true,’info_03’,false);

}else{
mfp.sw(false,’info_02’,true);
mfp.sw(false,’info_03’,true);

}

条件分岐がちょっと難しい感じですね

和田 (2021-07-11 22:51:35) www.synck.com

条件がちょっと複雑ですね。
swの最後のパラメータのfalseの部分をtrueにすることで、非表示にならずにどのように動いているかを確認する事ができますので、非表示にせずどのような挙動になっているか確認するとちょっとわかりやすいかもしれません。

info_02とinfo_03の指定がちょっと変な感じはします!