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

たつみさん (2016-02-10 00:25:06) v12.rentalserver.jp/firstfleur.com/order/sample_01.html

こんにちわ。いつも大変お世話になっております。
このたび高度なフォームを設置することになりまして「メールフォムプロ4」に初挑戦しております。

「スイッチング機能」に感動し、これで難しい要望に対応出来る！
と喜んだのですが、JSにも明るくない為、上手く動かす事が出来ず苦戦しております。
あっちが出たら、こっちがひっこんだり、ひっこまなかったり。。。

--------

ラジオボタンで「おまかせ」「スタンダード」「スペシャル」「その他」を設置。
いずれかを選ぶまでは、全て非表示。
いずれか…例えば「スタンダード」を選んだら「スタンダード」の項目を表示させる。
という動きをさせたいと思っております。

--------

ざっくりHTMLとJSはこんな感じです。

HTML

<dl class="mailform">
<label><input type="radio" name="プラン" value="おまかせ" id="leave" /> お任せ</label>
<label><input type="radio" name="プラン" value="スタンダード" id="standard" /> スタンダード</label></li>
<label><input type="radio" name="プラン" value="スペシャル" id="special" /> スペシャル</label></li>
<label><input type="radio" name="プラン" value="その他" id="other" />
</dl>

<dl class="mailform" id="plan-leave"></dl>
<dl class="mailform" id="plan-standard"></dl>
<dl class="mailform" id="plan-special"></dl>
<dl class="mailform" id="plan-other"></dl>

---
JS

function swElementsExample(){
if(mfp.$(’leave’).checked)
mfp.sw(false,’plan-leave’);
else
mfp.sw(true,’plan-leave’);
}

mfp.extend.event(’ready’,
function(obj){
swElementsExample();
}
);

mfp.extend.event(’blur’,
function(obj){
swElementsExample();
}
);

mfp.extend.event(’change’,
function(obj){
swElementsExample();
}
);

--------

説明書、サンプル、サポートセンターも見たのですが解らず質問させて頂きました。

お忙しいところ恐れ入りますが、どうぞ宜しくお願い致します。
（北海道の方向に手を合わせながら深く一礼）

スイッチング機能で複数の項目の表示非常（プロ4）

たつみさん (2016-02-11 03:47:18) v12.rentalserver.jp/firstfleur.com/order/sample_01.html

度々失礼いたします。

ひとまず「ラジオボタンのいずれかを選ぶまでは全て非表示」と、
「おまかせ(’leave’)」を選ぶと「おまかせの内容(’plan-leave’)」を表示、させる事は出来ましたが、他の要素を表示させる事が出来ません。

も…もしかして、スイッチング機能は二つの要素の切替えのみ可能なのでしょうか。

初歩的な質問かと思いますが、関数とか算数とかほんと苦手でして。
お手数お掛け致しますが、どうぞ宜しくお願い致します。
札幌方向に一礼。

function swElementsExample(){
if(mfp.$(’leave’).checked)
mfp.sw(false,’plan-leave’);
else
mfp.sw(true,’plan-leave’);
mfp.sw(true,’plan-standard’);
mfp.sw(true,’plan-special’);
mfp.sw(true,’plan-other’);
}

mfp.extend.event(’ready’,
function(obj){
swElementsExample();
}
);

mfp.extend.event(’blur’,
function(obj){
swElementsExample();
}
);

mfp.extend.event(’change’,
function(obj){
swElementsExample();
}
);

Re:スイッチング機能で複数の項目の表示非常（プロ4）

たつみさん (2016-02-23 03:04:33) v12.rentalserver.jp/firstfleur.com/order/sample_01.html

いえいえ！お忙しいところ丁寧にご回答頂き、ありがとうございました！

はい！「 toggle.js」を使用することで解決できました！
改めまして素晴らしいフォームとサポート、ありがとうございました！