MW WP FORMで選択肢によって入力項目が開閉するフォームを作成したい

Question

以下を参考に開閉するフォームを作成しています

選択肢によって入力項目が開閉するフォームの作り方（MW WP FORM編）

上記はラジオボックスで選択肢が２つですが、
今回はチェックボックスで選択肢が「1:A,2:B,3:C」があります。

実現したい条件分岐は、
① valueが「1:A」の場合は、.op-01の項目を表示
② valueが「2:B」の場合は、.op-01と.op-03の項目を表示
③ valueが「3:C」の場合は、.op-02の項目を表示

④ valueが「1:A」と「3:C」の場合は、.op-01と.op-02の項目を表示
⑤ valueが「2:B」と「3:C」の場合は、.op-01とop-02と.op-03の項目を表示

というものです。
value「1:A」と「2:B」が同時に選択されることはありません。

現在以下のコードで①②③は実現できました。

$(function() {
 $('[name="trip[data][]"]').change(function() {
  $(".trip-op-01").hide();
  $(".trip-op-02").hide();
  $(".trip-op-03").hide();
  if ($("input[name='trip[data][]']:checked").val() == "1") {
   $('.trip-op-01').fadeIn();
  }
  if($("input[name='trip[data][]']:checked").val() == "2") {
   $('.trip-op-01').fadeIn();
   $('.trip-op-03').fadeIn();
  }
  else if($("input[name='trip[data][]']:checked").val() == "3") {
   $('.trip-op-02').fadeIn();
  }
 }).trigger('change'); 
});

④⑤の複合条件になった時の記述が分からず模索しております。

演算子を使い以下のように記述しましたが、実現されません。

$(function() {
 $('[name="trip[data][]"]').change(function() {
  $(".trip-op-01").hide();
  $(".trip-op-02").hide();
  $(".trip-op-03").hide();
  if ($("input[name='trip[data][]']:checked").val() == "1") {
   $('.trip-op-01').fadeIn();
  }
  else if($("input[name='trip[data][]']:checked").val() == "2") {
   $('.trip-op-01').fadeIn();
   $('.trip-op-03').fadeIn();
  }
  else if($("input[name='trip[data][]']:checked").val() == "3") {
   $('.trip-op-02').fadeIn();
  }
  else if($("input[name='trip[data][]']:checked").val() == "1" && ("input[name='trip[data][]']:checked").val() == "3") {
    $('.trip-op-01').fadeIn();
   $('.trip-op-02').fadeIn();
  }
  else if($("input[name='trip[data][]']:checked").val() == "2" && ("input[name='trip[data][]']:checked").val() == "3") {
    $('.trip-op-01').fadeIn();
   $('.trip-op-02').fadeIn();
   $('.trip-op-03').fadeIn();
  }
 }).trigger('change'); 
});

Script初心者のため、コードの理解も乏しいです。

もっとスマートに実現できる方法はないでしょうか？
お助けください。

コードを以下に変更しましたが変わり無しでした。

<label>選択（複数選択可）＊</label>
<div class="radio-field">
[mwform_checkbox name="trip" children="1:A,2:B,3:C" vertically="true"]
</div>

<div class="form-field trip-op-01 content-op">
<label>「1:A」が選択されたら表示</label>
<div class="radio-field">[mwform_radio name="venue" vertically="true"]</div>
</div>

<div class="form-field trip-op-02 content-op">
<label>「2:B」が選択されたら表示</label>
<div class="radio-field">[mwform_radio name="guest" vertically="true"]</div>
</div>
<div class="form-field trip-op-03 content-op">
<label>「3:C」が選択されたら表示</label>
<div class="radio-field">[mwform_radio name="package" vertically="true"]</div>
</div>

$(function() {
 $('[name="trip[data][]"]').change(function() {
  $(".content-op").hide();
  var val = $("input[name='trip[data][]']:checked").val();
  if(val == "1" && val == "3") {
    $('.trip-op-01').fadeIn();
    $('.trip-op-03').fadeIn();
  }
  else if(val == "2" && val == "3") {
    $('.trip-op-02').fadeIn();
    $('.trip-op-03').fadeIn();
  }
  else if (val == "1") {
   $('.trip-op-01').fadeIn();
  }
  else if(val == "2") {
   $('.trip-op-01').fadeIn();
   $('.trip-op-02').fadeIn();
  }
  else if(val == "3") {
   $('.trip-op-03').fadeIn();
  }
 }).trigger('change'); 
});

Answer 1

select要素でmultipleが指定されているのが前提として
現在の場合、(val==1 && val==3)のケースでも、下の4.より1.が優先して判定されると思われますので、

1. ($("input[name='trip[data][]']:checked").val() == "1")
2. ($("input[name='trip[data][]']:checked").val() == "2")
3. ($("input[name='trip[data][]']:checked").val() == "3")
4. ($("input[name='trip[data][]']:checked").val() == "1" && ("input[name='trip[data][]']:checked").val() == "3")
5. ($("input[name='trip[data][]']:checked").val() == "2" && ("input[name='trip[data][]']:checked").val() == "3")

以下のように順番を変えるとどうでしょうか。

1. ($("input[name='trip[data][]']:checked").val() == "1" && ("input[name='trip[data][]']:checked").val() == "3")
2. ($("input[name='trip[data][]']:checked").val() == "2" && ("input[name='trip[data][]']:checked").val() == "3")
3. ($("input[name='trip[data][]']:checked").val() == "1")
4. ($("input[name='trip[data][]']:checked").val() == "2")
5. ($("input[name='trip[data][]']:checked").val() == "3")

Comments

[Unite-east]

ありがとうございます。
順番を変えましたが、エラーが出て③以外表示されませんでした。
エラー「Uncaught TypeError: "input[name='trip[data][]']:checked".val is not a function」

そもそもの書き方が間違っているのでしょうか・・・

[madone99]

MW WP FORMのショートコードはどのようになっていますか？

[Unite-east]

コードを編集したところに載せましたのでご確認お願いします。

[Unite-east]

すいません、セレクトボックスではなく、チェックボックス です、、、

[madone99]

チェックボックスに変更されたのでしたら、今までの分岐は無しで
こんな感じでいいかも知れませんね。

$('input[name=trip[data][]]:checked').each(function(i){
if ($("input[name='trip[data][]']:checked").val() == "1") $('.trip-op-01').fadeIn();
if ($("input[name='trip[data][]']:checked").val() == "2") $('.trip-op-02').fadeIn();
if ($("input[name='trip[data][]']:checked").val() == "3") $('.trip-op-03').fadeIn();
});

[Unite-east]

すいません、書き方が分からないのですが、このままの記述で貼り付けて良いのでしょうか。。。？