フォームの確認画面でcheckboxとselectの値を取得したい

Question

お世話になっております。
jQueryを使った、フォームの確認画面への値の表示で躓いております。
なんとか調べたのですがうまくいかず、こちらへ質問させていただきます。

wpのプラグインで、QuFormというものを使ってformを実装しております。
デフォルトでは確認画面が出ないので、

http://support.themecatcher.net/quform-wordpress-v2/guides/advanced/adding-a-form-data-preview-page

こちらのカスタム方法のページを見て確認画面を追加いたしました。
すると、checkboxとselectの項目だけうまく表示が出来ず、困っています。

<div class="aa-options aa-cf aa-options-block">
    <div class="aa-option"><input type="checkbox" name="aa_1_61[]" id="aa_1_61_b70d0c_1" class="aa-field aa-field-checkbox aa-field-1_61 aa-field-1_61_1" value="チェック項目１"><label for="aa_1_61_b70d0c_1" class="aa-option-label aa-option-label-1_61_1"><span class="aa-option-text">チェック項目１</span></label></div>
    <div class="aa-option"><input type="checkbox" name="aa_1_61[]" id="aa_1_61_b70d0c_2" class="aa-field aa-field-checkbox aa-field-1_61 aa-field-1_61_2" value="チェック項目２"><label for="aa_1_61_b70d0c_2" class="aa-option-label aa-option-label-1_61_2"><span class="aa-option-text">チェック項目２</span></label></div>
</div>

<span id="address01-value"></span>

//checkboxのソース

$('.aa-field-1_61').change(function () {
    $('#how-value').text($(this).val());
});

checkboxの場合は、複数チェックを入れても先頭の１項目だけが表示されてしまいます。
チェックしたすべての項目を表示できない状態から、
チェックしたすべての項目を表示可能にしたいと考えております。

---

<select id="aa_1_28_b70d0c" name="aa_1_28" class="aa-field aa-field-select aa-field-1_28">
    <option value="東京都" selected="selected">東京都</option>
    <option value="神奈川県">神奈川県</option>
</select>

<span id="how-value">チェック項目１</span>

//selectのソース

$('.aa-field-1_28').change(function () {
    $('#address01-value  option:selected').text($(this).val());
});

selectの場合は、なにも表示されない状態です。

以上、有識者の方、どうかご教授ください！
何卒よろしくお願いいたします。

Comments

[kei344]

出力されたHTML（ブラウザで「ページのソースを表示」）のフォーム部分を質問文に追記ください。

[junannko]

ご返信ありがとうございます。追記いたしました。ご査収いただけると助かります。

Answer 1

こういうことでしょうか？

$(function(){
  $('.aa-field-1_61').on('change',function(){
    $('#how-value').text($('.aa-field-1_61:checked').map(function(){return $(this).val();}).get().join(","));
  });
});

<label><input type="checkbox" name="aa_1_61[]" class="aa-field-1_61" value="チェック項目１">チェック項目１</label>
<label><input type="checkbox" name="aa_1_61[]" class="aa-field-1_61" value="チェック項目２">チェック項目２</label>
<span id="how-value"></span>

※selectは何をやりたいのかよくわかりません
multipleで複数選択して全部のvalを取りたいのでしょうか？

selectのvalueをspanに表示

$(function(){
  $('.aa-field-1_28').on('change',function(){
    $('#address01-value').text($(this).val());
  }).trigger('change');
});

<select name="aa_1_28" class="aa-field-1_28">
<option value="東京都" selected="selected">東京都</option>
<option value="神奈川県">神奈川県</option>
</select>

<span id="address01-value"></div>

Comments

[junannko]

おお。
出ました！選択した項目が複数表示されました！すごい。ありがとうございます！`.on() `を使うのですね。勉強になります。

[junannko]

> ※selectは何をやりたいのかよくわかりません
わかりづらくてすみません。
selectでやりたいことは、初期状態で selected="selected" になっている項目も含め、選択された値を表示したいと考えています。

現在ですと、selected="selected"の「東京」以外を選択すれば値が表示されるのですが、初期状態の「東京」を触らない場合、値が表示されない状態です。

初期状態でselected="selected"になっているものも含め、
選択された値を表示するにはどうすれば良いでしょうか？

[yambejp]

なるほど、selectの初期値を反映させる方法ですね
changeイベントを設定したあとtriggerでchangeを呼び出してやるのが一般的です
追記しておきました

[junannko]

さっそくのご返信をありがとうございます。
ご教授いただいたソースを試したところ、無事表示されました！
明快にご指導いただき、ありがとうございます。
triggerで呼び出すのですね。
今回ご教授いただいた内容をおさらいして、今後に活かしたいと思います。
ご対応に感謝いたします。