常連

注目の的

社会貢献

質問力

### 前提・実現したいこと
ワードプレス上の送信フォーム（MW WP FORMプラグイン使用）で、チェックボックスのチェックによって、表示/非表示を切り替える形をjqueryを使って実装していますが、確認画面に進んだ際、チェックした内容が意図したように表示されません。
後述「発生している問題」のケース３で、チェック内容を確認画面でも反映させるための修正方法をご教示いただけましたらありがたいです。

### 送信フォームの構成
送信フォームは、２つのチェックボックスと表示/非表示切り替え内容（テキストとラジオボタン）で構成。
チェックボックスは、①（name="ivent" children="a")と
チェックボックス②（name="ivent" children="b,c,d")で、同一グループ、必須（a,b,c,dから最低１つチェックが必要）にしてあります。

### 発生している問題
●ケース１：項目aをチェックし、表示された内容のラジオボタンにもチェック→問題なし（確認画面に反映される）
●ケース２：項目aをチェックせず、項目b,c,dのどれかをチェック→問題なし（確認画面に反映される）
●**ケース３：項目aをチェックし、項目b,c,dのどれかをチェック→　確認画面では、チェックボックスのチェック項目は反映されていますが、表示部分が非表示になり、ラジオボタンのチェック内容は反映されません。**
１のケースでは、確認画面でも開いた部分は、開いたままになっています。
a以外のチェックにより、表示内容が非表示になっているようです。
条件分岐の方法が違っているのでしょうか。

### 該当のソースコード
単純化した内容のコードです。
```html
※複数選択可
[mwform_checkbox name="ivent" children="a" vertically="true" id="checkbox"]
<div class="form_food" style="display: none;"> 希望の食べ物　
[mwform_radio name="food" id="food" children="ラーメン,ピザ,寿司"]</div>
 [mwform_checkbox name="ivent" children="b,c,d" vertically="true"]
```
```JQUERY
jQuery(function($) {
	var
		checkbox = $("#checkbox-1"),
		checkbox_change = function () {
if (checkbox.length) {
	if (checkbox.prop("checked")) {
		$(".form_food").show();
	} else {
		$(".form_food").hide();
	}
} else {
	// 確認画面用
	if ($('input[value="a"]').length) {
		$(".form_food").show(); 
	} else {
		$(".form_food").hide(); 
	}
}
		};
	checkbox_change();
	checkbox.change(checkbox_change);
});
```

送信フォームの確認画面で、選択肢による開閉部分がうまく反映されない

MW WP Form を使用し、募集内容のフォームを作成していたら、突き当たりました。
どうかお力添え頂けませんでしょうか。

###記入の有無
ラジオボタンで有りの場合　→　テキストエリアにて、必須をつけたテキストの入力を促す。
まではできているのですが･･･
**【有り】の場合、テキストエリアを表示、なおかつテキストエリアに必須項目をつける。**
**【無し】の場合、【有り】を選択しテキストに入力していたものをクリア（入力していない状態に戻す）にしたいです。**



###ラジオボタン三択からの選択に必須をつけたい
【選択肢Ａ】　   【選択肢Ｂ】　   【選択肢Ｃ】
. 　  ↓　　　　　　　↓　　　　　　　↓
【リストＡ】　　【リストＢ】　　 【リストＣとＤ】




【選択肢Ａ】を選択している場合、【リストＡ】を表示、【リストＢ】と【リストＣとＤ】は非表示。`<div class="pickup-op">`
【選択肢Ｂ】を選択している場合、【リストＢ】を表示、【リストＡ】と【リストＣとＤ】は非表示。`<div class="pickup-op2">`
【選択肢Ｃ】を選択している場合、【リストＣとＤ】を表示、【リストＡ】と【リストＢ】は非表示。`<div class="pickup-op3">`

【リストＢ～Ｄ】を選択したら、【リストＡ】の入力を初期値に戻す。
以上の手順を同じように繰り返すまでは、なんとかできましたが･･･

【リストＡ～Ｄ】をバリデーションで必須をつけると、お互いが邪魔をしてメールの送信が行えません。
【選択肢Ａ】選択→【リストＡ】表示し選択→**【リストＢ】と【リストＣとＤ】は非表示にし、なおかつ必須をはずす**ことは可能でしょうか？


### MW WP Form
```html
<table>
<tr>
<td>記入の有無</td>
<td>
[mwform_error keys="記入の有無"]
[mwform_radio name="記入の有無" children="有り,:無し" show_error="false"]
[mwform_error keys="記入有りの場合"]
[mwform_text name="記入有りの場合" size="30" maxlength="255" show_error="false" placeholder="ここに入力してください"]
</td>
</tr>

<tr>
<td>サークル傾向</td>
<td>
[mwform_radio name="大元の選択肢" id="pickup" value="1" children="1:選択肢Ａ,2:選択肢Ｂ,3:選択肢Ｃ"]
<div class="pickup-op">
[mwform_select name="リストＡ" children=":選んでください,A,B,C" post_raw="true"]
</div>
<div class="pickup-op2">
[mwform_select name="リストＢ" children=":選んでください,A,B,C" post_raw="true"]
</div>
<div class="pickup-op3">
1：[mwform_select name="リストＣ" children=":選んでください,A,B,C" post_raw="true"]
2：[mwform_select name="リストＤ" children=":選んでください,A,B,C" post_raw="true"]
</div>
</td>
</tr>
</table>

```

### functions.php
```
//記入の有無
function my_validation_rule( $Validation, $data ) {
	  if ( $data['記入の有無'] === '有り' ) {
      $Validation->set_rule( '記入有りの場合', 'noEmpty', array(
        'message' => 'テキストを入力してください'
      ) );
  }
  return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-xxx', 'my_validation_rule', 10, 2 );
```

### header.php
```
<script>
//入力ボックスの開閉
	$(function() {
 $('[name="大元の選択肢"]:radio').change(function() {
  $(".pickup-op").hide()
if ($("input:radio[name='大元の選択肢']:checked").val() == "1") {
   $('.pickup-op').show();
  } else if($("input:radio[name='大元の選択肢']:checked").val() == "2") {
   $("select[name='リストＡ']").val("");
  } else if($("input:radio[name='大元の選択肢']:checked").val() == "3") {
   $("select[name='リストＡ']").val("");
  }
 }).trigger('change'); 
});
</script>
<script>
//入力ボックスの開閉　2
	$(function() {
 $('[name="大元の選択肢"]:radio').change(function() {
  $(".pickup-op2").hide();
  if ($("input:radio[name='大元の選択肢']:checked").val() == "2") {
   $('.pickup-op2').show();
  } else if($("input:radio[name='大元の選択肢']:checked").val() == "1") {
   $("select[name='リストＢ']").val("");
  } else if($("input:radio[name='大元の選択肢']:checked").val() == "3") {
   $("select[name='リストＢ']").val("");
  }
 }).trigger('change'); 
});
</script>
<script>
//入力ボックスの開閉　3
	$(function() {
 $('[name="大元の選択肢"]:radio').change(function() {
  $(".pickup-op3").hide();
  if ($("input:radio[name='大元の選択肢']:checked").val() == "3") {
   $('.pickup-op3').show();
  } else if($("input:radio[name='大元の選択肢']:checked").val() == "1") {
   $("select[name='リストＣ']").val("");
   $("select[name='リストＤ']").val("");
  } else if($("input:radio[name='大元の選択肢']:checked").val() == "2") {
   $("select[name='リストＣ']").val("");
   $("select[name='リストＤ']").val("");
  }
 }).trigger('change'); 
});
</script>
```


勉強中の身になりますので、他の不具合などございましたら、ご助言頂けますと幸いです。
何卒、宜しくお願い致します。