teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問フォームの確認画面でcheckboxとselectの値を取得したい

編集履歴

質問編集履歴

4

いただいた回答に合わせてhtmlの表記を統一

2018/03/01 08:08

投稿

junannko
junannko

スコア18

title CHANGED
File without changes
body CHANGED
@@ -15,6 +15,8 @@
15
15
  <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>
16
16
  <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>
17
17
  </div>
18
+
19
+ <span id="address01-value"></span>
18
20
  ```
19
21
  ```js
20
22
  //checkboxのソース
@@ -23,12 +25,7 @@
23
25
  $('#how-value').text($(this).val());
24
26
  });
25
27
  ```
26
- ```html
27
- <!--確認画面に吐き出されたソース-->
28
28
 
29
- <span id="address01-value"></span>
30
- ```
31
-
32
29
  checkboxの場合は、複数チェックを入れても先頭の１項目だけが表示されてしまいます。
33
30
  チェックしたすべての項目を表示できない状態から、
34
31
  チェックしたすべての項目を表示可能にしたいと考えております。
@@ -40,6 +37,8 @@
40
37
  <option value="東京都" selected="selected">東京都</option>
41
38
  <option value="神奈川県">神奈川県</option>
42
39
  </select>
40
+
41
+ <span id="how-value">チェック項目１</span>
43
42
  ```
44
43
  ```js
45
44
  //selectのソース
@@ -48,12 +47,7 @@
48
47
  $('#address01-value option:selected').text($(this).val());
49
48
  });
50
49
  ```
51
- ```html
52
- <!--確認画面に吐き出されたソース-->
53
50
 
54
- <span id="how-value">チェック項目１</span>
55
- ```
56
-
57
51
  selectの場合は、なにも表示されない状態です。
58
52
 
59
53
  以上、有識者の方、どうかご教授ください！

3

間違いを修正

2018/03/01 08:08

投稿

junannko
junannko

スコア18

title CHANGED
File without changes
body CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  ```html
14
14
  <div class="aa-options aa-cf aa-options-block">
15
- <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="チェック項目１" selected="selected"><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>
15
+ <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>
16
16
  <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>
17
17
  </div>
18
18
  ```

2

ソースを修正

2018/03/01 06:04

投稿

junannko
junannko

スコア18

title CHANGED
File without changes
body CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  ```html
14
14
  <div class="aa-options aa-cf aa-options-block">
15
- <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>
15
+ <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="チェック項目１" selected="selected"><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>
16
16
  <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>
17
17
  </div>
18
18
  ```

1

htmlを追加

2018/03/01 06:03

投稿

junannko
junannko

スコア18

title CHANGED
File without changes
body CHANGED
@@ -10,26 +10,50 @@
10
10
  こちらのカスタム方法のページを見て確認画面を追加いたしました。
11
11
  すると、checkboxとselectの項目だけうまく表示が出来ず、困っています。
12
12
 
13
+ ```html
14
+ <div class="aa-options aa-cf aa-options-block">
15
+ <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>
16
+ <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>
17
+ </div>
13
18
  ```
19
+ ```js
14
20
  //checkboxのソース
15
21
 
16
- $('.quform-field-1_61').change(function () {
22
+ $('.aa-field-1_61').change(function () {
17
23
  $('#how-value').text($(this).val());
18
24
  });
19
25
  ```
26
+ ```html
27
+ <!--確認画面に吐き出されたソース-->
28
+
29
+ <span id="address01-value"></span>
30
+ ```
31
+
20
32
  checkboxの場合は、複数チェックを入れても先頭の１項目だけが表示されてしまいます。
21
33
  チェックしたすべての項目を表示できない状態から、
22
34
  チェックしたすべての項目を表示可能にしたいと考えております。
23
35
 
24
36
  ***
25
37
 
38
+ ```html
39
+ <select id="aa_1_28_b70d0c" name="aa_1_28" class="aa-field aa-field-select aa-field-1_28">
40
+ <option value="東京都" selected="selected">東京都</option>
41
+ <option value="神奈川県">神奈川県</option>
42
+ </select>
26
43
  ```
44
+ ```js
27
45
  //selectのソース
28
46
 
29
- $('.quform-field-1_28').change(function () {
47
+ $('.aa-field-1_28').change(function () {
30
48
  $('#address01-value option:selected').text($(this).val());
31
49
  });
32
50
  ```
51
+ ```html
52
+ <!--確認画面に吐き出されたソース-->
53
+
54
+ <span id="how-value">チェック項目１</span>
55
+ ```
56
+
33
57
  selectの場合は、なにも表示されない状態です。
34
58
 
35
59
  以上、有識者の方、どうかご教授ください！