JAVA / jQuery

【WordPress / jQuery】ラジオボタンなどの選択により、特定の入力項目（欄）が現れたり消えたりするお問い合わせフォーム【MW WP FORM】

  /

WordPressで、問い合わせフォーム（MW WP FORM）を設置していて、ラジオボタンなどの選択により、特定の入力項目（欄）が現れたり消えたりするようにしたいケース。

以下、HTMLの例

<tr>
<th>集荷</th>
<td>[mwform_radio name="pick" id="pick" value="2" children="1:要,2:不要"]</td>
</tr>
<tr class="pick-op">
<th>希望日</th>
<td>[mwform_datepicker name="pickDate" id="pickDate" js="minDate:3" placeholder="翌日以降で指定可"]</td>
</tr>
<tr class="pick-op">
<th>希望時間</th>
<td>[mwform_select name="pickTime" id="pickTime" children="0:指定なし,1:〜12:00,2:15:00〜18:00,3:18:00〜21:00"]</td>
</tr>

 

以下、jQuery の例

$(function() {
 $('[name="pick"]:radio').change(function() {
  $(".pick-op").hide();
  if ($("input:radio[name='pick']:checked").val() == "1") {
   $('.pick-op').show();
  } else if($("input:radio[name='pick']:checked").val() == "2") {
   $("input[name='pickDate']").val("");
   $("select[name='pickTime']").val("0");
  }
 }).trigger('change'); 
});

 

※参考

https://works.coldsleep.jp/blog/form-option/

RELATED POST