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

クボさん (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);

}