回答編集履歴
3
追記3
test
CHANGED
|
@@ -58,6 +58,20 @@
|
|
|
58
58
|
});
|
|
59
59
|
```
|
|
60
60
|
|
|
61
|
+
#### 追記3
|
|
62
|
+
|
|
63
|
+
参考までに、[URLSearchParams](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams/URLSearchParams) を使うと、キーと値を `=` でつなげたり `&` でジョインするといった煩雑な文字列処理をすることなくクエリパラメータの文字列が得られます。例として**追記2**に挙げたHTMLに対してクエリパラメータを作るコードを挙げておきます。
|
|
61
64
|
|
|
62
65
|
|
|
66
|
+
```javascript
|
|
67
|
+
$('.hoge').on('change', function(){
|
|
68
|
+
const vals = new URLSearchParams(
|
|
69
|
+
$('.hoge:checked').toArray().map(e => [e.name, e.value])
|
|
70
|
+
);
|
|
71
|
+
$('.result4').text(vals);
|
|
72
|
+
});
|
|
73
|
+
```
|
|
74
|
+
ただしURLSearchParams を使ってクエリパラメータの文字列を作った場合、URLエンコードされたものになります。
|
|
75
|
+
- 使用例 👉 https://codepen.io/su507/pen/rNvNGER?editors=1010
|
|
63
76
|
|
|
77
|
+
|
2
追記
test
CHANGED
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
#### 追記1
|
|
29
29
|
|
|
30
30
|
質問のタイトルが
|
|
31
31
|
|
|
@@ -33,5 +33,31 @@
|
|
|
33
33
|
|
|
34
34
|
となっており、「連番」とあることから(1) かなと思いましたが、(2) の可能性もある気がしたので両方回答しておきました。
|
|
35
35
|
|
|
36
|
+
#### 追記2
|
|
37
|
+
|
|
38
|
+
もし要件が(2)である場合、すなわちクエリパラメータの値`リンゴ`のキーは`no1`、`バナナ`のキーは`no2`というように決まっているのであれば、
|
|
39
|
+
HTMLの各 `<input>` の属性を下記に修正するのもよいかもしれません。
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<label><input type="checkbox" class="hoge" name="no1" value="リンゴ" />リンゴ</label>
|
|
43
|
+
<label><input type="checkbox" class="hoge" name="no2" value="バナナ" />バナナ</label>
|
|
44
|
+
<label><input type="checkbox" class="hoge" name="no3" value="オレンジ" />オレンジ</label>
|
|
45
|
+
<label><input type="checkbox" class="hoge" name="no4" value="トマト" />トマト</label>
|
|
46
|
+
```
|
|
47
|
+
このようにしておき、また JavaScript のほうでは jQuery の toArray() を使って要素の配列にして、
|
|
48
|
+
配列の map() メソッドを使うことにすると、以下のようにコードをより短く書けます。
|
|
49
|
+
|
|
50
|
+
```javascript
|
|
51
|
+
$('.hoge').on('change', function(){
|
|
52
|
+
const vals = $('.hoge:checked')
|
|
53
|
+
.toArray()
|
|
54
|
+
.map(e => `${e.name}=${e.value}`)
|
|
55
|
+
.join('&');
|
|
56
|
+
|
|
57
|
+
$('.result4').text(vals);
|
|
58
|
+
});
|
|
59
|
+
```
|
|
36
60
|
|
|
37
61
|
|
|
62
|
+
|
|
63
|
+
|
1
追記、修正
test
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
});
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
-
(
|
|
14
|
+
(2) `no2=バナナ&no4=トマト` とする。
|
|
15
15
|
```javascript
|
|
16
16
|
$('input[name=hoge]').on('change', function(){
|
|
17
17
|
const vals = $('input[name=hoge]').map(
|
|
@@ -25,4 +25,13 @@
|
|
|
25
25
|
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
+
**備考：**
|
|
28
29
|
|
|
30
|
+
質問のタイトルが
|
|
31
|
+
|
|
32
|
+
> 複数のチェックボックスの値を取得した後、カンマの代わりに連番＆特定の文字をセットで表示させたい
|
|
33
|
+
|
|
34
|
+
となっており、「連番」とあることから(1) かなと思いましたが、(2) の可能性もある気がしたので両方回答しておきました。
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|