回答編集履歴
6
テキスト修正
answer
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
自分ならこうやるかなと思ったコードを挙げておきます。
|
|
4
4
|
|
|
5
|
-
まず、考え方として、`.checkbox_1` のほうで選ばれている値の配列と、`.checkbox_2` のほうで選ばれている値の配列を、それぞれ集合と考えれば、result2 はこれら２つの集合の[直積集合](https://ja.wikipedia.org/wiki/%E7%9B%B4%E7%A9%8D%E9%9B%86%E5%90%88)から作ることができます。そこで、直積集合に相当する配列を得るにはどうしたらよいかと考えると、自分で書くのももちろんよいですが、ライブラリの力を借ります。配列やオブジェクトの操作で便利な [lodash](https://lodash.com/) と、これのプラグイン
|
|
5
|
+
まず、考え方として、`.checkbox_1` のほうで選ばれている値の配列と、`.checkbox_2` のほうで選ばれている値の配列を、それぞれ集合と考えれば、result2 はこれら２つの集合の[直積集合](https://ja.wikipedia.org/wiki/%E7%9B%B4%E7%A9%8D%E9%9B%86%E5%90%88)から作ることができます。そこで、直積集合に相当する配列を得るにはどうしたらよいかと考えると、自分で書くのももちろんよいですが、ライブラリの力を借りるという手もあります。配列やオブジェクトの操作で便利なライブラリ [lodash](https://lodash.com/) と、これのプラグインとして、直積を作ってくれる[lodash.product](https://github.com/SeregPie/lodash.product) を使うと、result2は以下で得られます。
|
|
6
6
|
|
|
7
7
|
```javascript
|
|
8
8
|
$('[type=checkbox]').on('change', function() {
|
5
テキスト修正
answer
CHANGED
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
|
|
138
138
|
- `<form>` を `<div>` にして、チェックボックスを囲むdivであることを示すclassを `check-boxes` とし、かつ、 `data-name` 属性にこのdivが含むチェックボックスの値の（`size` だったり `use`だったりの)名前を入れておく。
|
|
139
139
|
|
|
140
|
-
- プログラムのほうを、 `div.check-boxes` が何個あっても対応できるように修正し、
|
|
140
|
+
- プログラムのほうを、 `div.check-boxes` が何個あっても対応できるように修正しています。その確認のため、３個目の`<div>`を追加、data-nameを仮に `score` としました。さらに同じ構造の`div.check-boxes`をいくつ追加していっても、プログラム側は修正不要になっているはずです。
|
|
141
141
|
|
|
142
142
|
- 各チェックボックスの （`checkbox_1` などの） class は、プログラム側からは不要になったので、いったん削除
|
|
143
143
|
|
4
テキスト修正
answer
CHANGED
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
</body>
|
|
134
134
|
</html>
|
|
135
135
|
```
|
|
136
|
-
上記のコードでは、質問への追記内容に対応した他、以下の修正
|
|
136
|
+
上記のコードでは、質問への追記内容に対応した他、以下の点でも修正しています。
|
|
137
137
|
|
|
138
138
|
- `<form>` を `<div>` にして、チェックボックスを囲むdivであることを示すclassを `check-boxes` とし、かつ、 `data-name` 属性にこのdivが含むチェックボックスの値の（`size` だったり `use`だったりの)名前を入れておく。
|
|
139
139
|
|
3
テキスト修正
answer
CHANGED
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
|
|
138
138
|
- `<form>` を `<div>` にして、チェックボックスを囲むdivであることを示すclassを `check-boxes` とし、かつ、 `data-name` 属性にこのdivが含むチェックボックスの値の（`size` だったり `use`だったりの)名前を入れておく。
|
|
139
139
|
|
|
140
|
-
- プログラムのほうを、 `div.check-boxes` が何個あっても対応できるように修正し、これが分かるように、３個目の`<div>`を追加（nameを仮に `score` としました。さらに同じ構造の
|
|
140
|
+
- プログラムのほうを、 `div.check-boxes` が何個あっても対応できるように修正し、これが分かるように、３個目の`<div>`を追加（nameを仮に `score` としました。さらに同じ構造の`div.check-boxes`を追加していっても、プログラム側は修正不要になっているはずです。）
|
|
141
141
|
|
|
142
142
|
- 各チェックボックスの （`checkbox_1` などの） class は、プログラム側からは不要になったので、いったん削除
|
|
143
143
|
|
2
テキスト修正
answer
CHANGED
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
自分ならこうやるかなと思ったコードを挙げておきます。
|
|
4
4
|
|
|
5
|
-
考え方として
|
|
6
|
-
次に、直積集合に相当する配列を得るにはどうしたらよいかと考えると、自分で書くのももちろんよいですが、ライブラリの力を借ります。配列やオブジェクトの操作で便利な [lodash](https://lodash.com/) と、これのプラグインで直積を作ってくれる[lodash.product](https://github.com/SeregPie/lodash.product)というのがあるのでお借りしますと、result2は以下で得られます。
|
|
5
|
+
まず、考え方として、`.checkbox_1` のほうで選ばれている値の配列と、`.checkbox_2` のほうで選ばれている値の配列を、それぞれ集合と考えれば、result2 はこれら２つの集合の[直積集合](https://ja.wikipedia.org/wiki/%E7%9B%B4%E7%A9%8D%E9%9B%86%E5%90%88)から作ることができます。そこで、直積集合に相当する配列を得るにはどうしたらよいかと考えると、自分で書くのももちろんよいですが、ライブラリの力を借ります。配列やオブジェクトの操作で便利な [lodash](https://lodash.com/) と、これのプラグインで直積を作ってくれる[lodash.product](https://github.com/SeregPie/lodash.product)を使うと、result2は以下で得られます。
|
|
7
6
|
|
|
8
7
|
```javascript
|
|
9
8
|
$('[type=checkbox]').on('change', function() {
|
1
テキスト追加
answer
CHANGED
|
@@ -66,4 +66,81 @@
|
|
|
66
66
|
```
|
|
67
67
|
|
|
68
68
|
|
|
69
|
-
以上、参考になれば幸いです。
|
|
69
|
+
以上、参考になれば幸いです。
|
|
70
|
+
|
|
71
|
+
### 補足：追記への対応
|
|
72
|
+
|
|
73
|
+
ご質問に追記された内容に対応したコードの一例を挙げます。
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<!DOCTYPE html>
|
|
77
|
+
<html lang="ja">
|
|
78
|
+
<head>
|
|
79
|
+
<meta charset="UTF-8">
|
|
80
|
+
<title>Q259669</title>
|
|
81
|
+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
82
|
+
<script src="https://unpkg.com/lodash"></script>
|
|
83
|
+
<script src="https://unpkg.com/lodash.product"></script>
|
|
84
|
+
<script>
|
|
85
|
+
$(function() {
|
|
86
|
+
$('button').on('click', function() {
|
|
87
|
+
|
|
88
|
+
const checkedValues = $('.check-boxes').map(function() {
|
|
89
|
+
const values = $(this).find(':checked').get().map(e => +e.value);
|
|
90
|
+
return { name: $(this).data('name'), values: values.length ? values : [0] };
|
|
91
|
+
}).get();
|
|
92
|
+
|
|
93
|
+
const names = checkedValues.map(({ name }) => name);
|
|
94
|
+
const product = _.product(...checkedValues.map(({ values }) => values));
|
|
95
|
+
const result = product.map(values => Object.fromEntries(_.zip(names, values)));
|
|
96
|
+
|
|
97
|
+
// resultをJSONにして hr の下に表示する。
|
|
98
|
+
$('#result').text(JSON.stringify(result, null , "\t"));
|
|
99
|
+
});
|
|
100
|
+
});
|
|
101
|
+
</script>
|
|
102
|
+
</head>
|
|
103
|
+
<body>
|
|
104
|
+
|
|
105
|
+
<h3>size要素</h3>
|
|
106
|
+
<div class="check-boxes" data-name="size">
|
|
107
|
+
<label><input type="checkbox" value="1100">1100</label>
|
|
108
|
+
<label><input type="checkbox" value="1200">1200</label>
|
|
109
|
+
<label><input type="checkbox" value="1300">1300</label>
|
|
110
|
+
<label><input type="checkbox" value="1400">1400</label>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<h3>use要素</h3>
|
|
114
|
+
<div class="check-boxes" data-name="use">
|
|
115
|
+
<label><input type="checkbox" value="11">11</label>
|
|
116
|
+
<label><input type="checkbox" value="12">12</label>
|
|
117
|
+
<label><input type="checkbox" value="13">13</label>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
<h3>score要素</h3>
|
|
121
|
+
<div class="check-boxes" data-name="score">
|
|
122
|
+
<label><input type="checkbox" value="91">91</label>
|
|
123
|
+
<label><input type="checkbox" value="92">92</label>
|
|
124
|
+
<label><input type="checkbox" value="93">93</label>
|
|
125
|
+
<label><input type="checkbox" value="94">94</label>
|
|
126
|
+
<label><input type="checkbox" value="95">95</label>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<button type="button" style="margin: 50px;">検索</button>
|
|
130
|
+
|
|
131
|
+
<hr />
|
|
132
|
+
<pre id="result"/>
|
|
133
|
+
|
|
134
|
+
</body>
|
|
135
|
+
</html>
|
|
136
|
+
```
|
|
137
|
+
上記のコードでは、質問への追記内容に対応した他、以下の修正を入れています。
|
|
138
|
+
|
|
139
|
+
- `<form>` を `<div>` にして、チェックボックスを囲むdivであることを示すclassを `check-boxes` とし、かつ、 `data-name` 属性にこのdivが含むチェックボックスの値の（`size` だったり `use`だったりの)名前を入れておく。
|
|
140
|
+
|
|
141
|
+
- プログラムのほうを、 `div.check-boxes` が何個あっても対応できるように修正し、これが分かるように、３個目の`<div>`を追加（nameを仮に `score` としました。さらに同じ構造の `div`を追加しても、プログラム側が修正不要になっているはずです。）
|
|
142
|
+
|
|
143
|
+
- 各チェックボックスの （`checkbox_1` などの） class は、プログラム側からは不要になったので、いったん削除
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
上記に挙げた回答コードは（補足のほうも含め）、もしかすると、uwanosoraさんが作ろうとしているものの要件に対して、オーバースペック気味のものになっているかもしれませんので、あくまで参考に留めて頂ければ幸いです。
|