回答編集履歴

4

修正

2018/07/11 08:47

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -12,9 +12,9 @@
12
12
 
13
13
  同じであっても不可能ではありません。
14
14
 
15
- 自分で意図した通りの配列を「作る」ためにやりやすくするだけです。
15
+ **自分で意図した通りの配列を「作る」ためにやりやすくするだけです。
16
16
 
17
- 勝手に出来上がるわけではありません。
17
+ 勝手に出来上がるわけではありません。**
18
18
 
19
19
 
20
20
 
@@ -97,3 +97,9 @@
97
97
  色:["2"]
98
98
 
99
99
  ```
100
+
101
+
102
+
103
+ ※現在のつくりだとチェックしてなくてもオブジェクト作ってしまうので、一度受け取って何も空配列なら検索条件オブジェクトに追記 という条件分岐は入れたほうがいいかもしれません。
104
+
105
+  そこは自身でやってみてください。

3

修正

2018/07/11 08:47

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -3,6 +3,18 @@
3
3
 
4
4
 
5
5
  # あまり具体的な回答ではなかったためコード作ってみました。
6
+
7
+
8
+
9
+ 大前提:
10
+
11
+ nameを別々にするのはあくまで「プログラムで明示的にして扱いやすくするため」であって、
12
+
13
+ 同じであっても不可能ではありません。
14
+
15
+ 自分で意図した通りの配列を「作る」ためにやりやすくするだけです。
16
+
17
+ 勝手に出来上がるわけではありません。
6
18
 
7
19
 
8
20
 
@@ -37,6 +49,10 @@
37
49
  </form>
38
50
 
39
51
  ```
52
+
53
+ 対象のnameを別途配列にもってループ
54
+
55
+ それぞれcheckboxの情報をmapで取得して検索条件オブジェクトに追記していく。
40
56
 
41
57
  ```js
42
58
 

2

コード

2018/07/11 08:44

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -2,4 +2,82 @@
2
2
 
3
3
 
4
4
 
5
- **回答があまり要件にそってなく、具体的でなかったかもれないので、後ほど追記します**
5
+ # あまり具体的な回答なかったためコード作ってみまた。
6
+
7
+
8
+
9
+ ```html
10
+
11
+ <form id="form" name="search" action="">
12
+
13
+ <div>
14
+
15
+ <p>色</p>
16
+
17
+ <label><input name="color[]" type="checkbox" value="1">オレンジ</label>
18
+
19
+ <label><input name="color[]" type="checkbox" value="2">紫</label>
20
+
21
+ </div>
22
+
23
+ <div>
24
+
25
+ <p>旬</p>
26
+
27
+ <label><input name="season[]" type="checkbox" value="2">2月</label>
28
+
29
+ <label><input name="season[]" type="checkbox" value="8">8月</label>
30
+
31
+ <label><input name="season[]" type="checkbox" value="10">10月</label>
32
+
33
+ </div>
34
+
35
+ <button class="submit" value="検索" type="button">検索</button>
36
+
37
+ </form>
38
+
39
+ ```
40
+
41
+ ```js
42
+
43
+ $(function(){
44
+
45
+ var search_option = {0:{"name":"color","label":"色"},1:{"name":"season","label":"旬"}};
46
+
47
+ var search = {};
48
+
49
+ $("button").on("click",function(){
50
+
51
+ for(let key in search_option) {
52
+
53
+ search[search_option[key]["label"]] = $('[name="'+search_option[key]["name"]+'[]"]:checked').map(function(){
54
+
55
+ var obj = [];
56
+
57
+ obj.push( $(this).val());
58
+
59
+ return obj;
60
+
61
+ }).get();
62
+
63
+ }
64
+
65
+ console.log(search);
66
+
67
+ });
68
+
69
+ });
70
+
71
+ ```
72
+
73
+ 出力結果:旬を2月10月、色を紫 選択した場合
74
+
75
+ ```
76
+
77
+ {色: Array(1), 旬: Array(2)}
78
+
79
+ 旬:(2) ["2", "10"]
80
+
81
+ 色:["2"]
82
+
83
+ ```

1

追記

2018/07/11 08:38

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -1 +1,5 @@
1
1
  checkboxのnameを色と旬で別にそれぞれで取得すれば良いのでは?
2
+
3
+
4
+
5
+ **回答があまり要件にそってなく、具体的でなかったかもしれないので、後ほど追記します**