ラジオボタンの選択によって、次に出てくる項目を変えてみたよ。
しかも、２段階にチャレンジしたので、難しくて、だいぶ苦戦！
校舎（ラジオボタン）→クラス（ラジオボタン）→日時
ラジオボタンがチェックされた項目で、条件分岐させるには
まず”A校舎” “B校舎” “C校舎”のどれかをラジオボタンで選択したとします。
“A校舎”なら、”Aクラス-01” “Aクラス-02″のラジオボタン
“B校舎”なら、”Bクラス-01” “Bクラス-02″のラジオボタン
“C校舎”なら、”Cクラス-01” “Cクラス-02″のラジオボタン
がそれぞれ表示されます。
フォームをつくる
<ul class="contact-list top">
<li class="ttl">希望校舎<span class="required">必須</span></li>
<li class="field bifurcation-area">[radio radio-school use_label_element default:1
"A校舎" "B校舎" "C校舎"]</li>
</ul>
<!-- A校舎 ------------------------------------------- -->
<div class="school-a">
<ul class="contact-list open-a top">
<li class="ttl">希望コースA校舎<span class="required">必須</span></li>
<li class="field bifurcation-area">[radio radio-479 use_label_element default:1
"Aクラス-01" "Aクラス-02"]</li>
</ul>
<ul class="contact-list top class-01 open-a-class">
<li class="ttl">希望日【Aクラス-01】A校舎<span class="required">必須</span></li>
<li class="field field-m">
<span class="arrow-style">[radio radio-480 use_label_element default:0
"10/14(土)"
"10/16(月)"
]</span>
</li>
</ul>
<ul class="contact-list top class-02 open-a-class">
<li class="ttl">希望日【Aクラス-02】A校舎<span class="required">必須</span></li>
<li class="field field-m">
<span class="arrow-style">[radio radio-480 use_label_element default:0
"10/14(土)"
"10/16(月)"
]</span>
</li>
</ul>
</div>
<!-- B校舎 ------------------------------------------- -->
<div class="school-b">
<ul class="contact-list open-b top">
<li class="ttl">希望コースB校舎<span class="required">必須</span></li>
<li class="field bifurcation-area">[radio radio-479 use_label_element default:1
"Bクラス-01" "Bクラス-02"]</li>
</ul>
<ul class="contact-list top class-01 open-b-class">
<li class="ttl">希望日【Bクラス-01】B校舎<span class="required">必須</span></li>
<li class="field field-m">
<span class="arrow-style">[radio radio-480 use_label_element default:0
"10/14(土)"
"10/16(月)"
]</span>
</li>
</ul>
<ul class="contact-list top class-02 open-b-class">
<li class="ttl">希望日【Bクラス-02】B校舎<span class="required">必須</span></li>
<li class="field field-m">
<span class="arrow-style">[radio radio-480 use_label_element default:0
"10/14(土)"
"10/16(月)"
]</span>
</li>
</ul>
</div>
<!-- C校舎 ------------------------------------------- -->
<div class="school-c">
<ul class="contact-list open-c top">
<li class="ttl">希望コースC校舎<span class="required">必須</span></li>
<li class="field bifurcation-area">[radio radio-479 use_label_element default:1
"Cクラス-01" "Cクラス-02"]</li>
</ul>
<ul class="contact-list top class-01 open-c-class">
<li class="ttl">希望日【Cクラス-01】B校舎<span class="required">必須</span></li>
<li class="field field-m">
<span class="arrow-style">[radio radio-480 use_label_element default:0
"10/14(土)"
"10/16(月)"
]</span>
</li>
</ul>
<ul class="contact-list top class-02 open-c-class">
<li class="ttl">希望日【Cクラス-02】C校舎<span class="required">必須</span></li>
<li class="field field-m">
<span class="arrow-style">[radio radio-480 use_label_element default:0
"10/14(土)"
"10/16(月)"
]</span>
</li>
</ul>
</div>jQueryで分岐させる
// /* 校舎選択の条件分岐ーーーーーーーーーーーーーーーーーーーーーーーー */
$(function () {
$('[name="radio-school"]:radio').change(function () {
var result = $("input[name='radio-school']:checked").val();
if (result === 'A校舎') {
$('.open-a,.school-a').addClass('open');
$('.open-b,.school-b').removeClass('open');
$('.open-c,.school-c').removeClass('open');
$('.school-b input[type="radio"]').prop('checked', false);
$('.school-c input[type="radio"]').prop('checked', false);
} else if (result === 'B校舎') {
$('.open-b,.school-b').addClass('open');
$('.open-a,.school-a').removeClass('open');
$('.open-c,.school-c').removeClass('open');
$('.school-a input[type="radio"]').prop('checked', false);
$('.school-c input[type="radio"]').prop('checked', false);
} else if (result === 'C校舎') {
$('.open-c,.school-c').addClass('open');
$('.open-a,.school-a').removeClass('open');
$('.open-b,.school-b').removeClass('open');
$('.school-b input[type="radio"]').prop('checked', false);
$('.school-a input[type="radio"]').prop('checked', false);
}
}).trigger('change');
});open-a/open-b/open-cに、それぞれopenをつけて、cssで表示・非表示にしています。
校舎→クラスだけなら、open-a/open-b/open-cだけでいいのですが、
校舎→クラス→日時に、必要なためschool-a/school-b/school-cにもopenをつけてます。
$(‘.school-b input[type=”radio”]’).prop(‘checked’, false);は、戻った時に、該当のスクールにチェックしていないときに、ラジオボタンを外すために付け足しました。
cssで表示・非表示をつくる
/* 校舎選択------------------ */
.open-a, .open-b, .open-c {
display: none;
}
.open-a.open {
display: flex;
}
.open-b.open {
display: flex;
}
.open-c.open {
display: flex;
}2段階目の分岐を作る
今回はもう１段階分岐させます。
class-01/class-02に、それぞれopenをつけて、cssで表示・非表示にしています。
ふつうdiplay: block:ですが、今回flexをレイアウトに使っているため、flexにしました。
// /* クラス選択の条件分岐ーーーーーーーーーーーーーーーーーーーーーーーー */
$(function () {
$('[name="radio-479"]:radio').change(function () {
var result = $("input[name='radio-479']:checked").val();
if (result === 'クラス-01') {
$('.class-01').addClass('open');
$('.class-02').removeClass('open');
$('.class-02 input[type="radio"]').prop('checked', false);
} else if (result === 'クラス-02') {
$('.class-02').addClass('open');
$('.class-01').removeClass('open');
$('.class-01 input[type="radio"]').prop('checked', false);
}
}).trigger('change');
});A校舎全体を<div class=”school-a”>で囲って、
school-aにもopenをつけて、表示・非表示を切り替えています。
$(‘.class-01 input[type=”radio”]’).prop(‘checked’, false);は、戻った時に、選択してないクラスのラジオボタンのチェックしたものが外れるようにしました。
/* クラス選択------------------ */
.open-a-class,
.open-b-class,
.open-c-class{
display: none;
}
.open .open-a-class.open,
.open .open-b-class.open,
.open .open-c-class.open{
display: flex;
}・”A校舎”なら、”Aクラス-01″ “Aクラス-02″のラジオボタン、そのあとAクラス用の希望日
・”B校舎”なら、”Bクラス-01″ “Bクラス-02″のラジオボタン、そのあとBクラス用の希望日
・”C校舎”なら、”Cクラス-01″ “Cクラス-02″のラジオボタン、そのあとCクラス用の希望日
・最初選択項目にselectを使っていたのですが、これだとメールにうまく表示されなかったです。
原因は不明ですが、jsで条件分岐をたくさんするときは、selectタグでなくラジオボタンの方がいいかもしれません。
