回答編集履歴

テキスト修正

2020/05/09 08:41

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -6,7 +6,7 @@
-まず、考え方として、`.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は以下で得られます。
+まず、考え方として、`.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は以下で得られます。

テキスト修正

2020/05/09 08:41

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -276,7 +276,7 @@
-- プログラムのほうを、 `div.check-boxes` が何個あっても対応できるように修正し、これが分かるように、３個目の`<div>`を追加（nameを仮に `score` としました。さらに同じ構造の`div.check-boxes`を追加していっても、プログラム側は修正不要になっているはずです。）
+- プログラムのほうを、 `div.check-boxes` が何個あっても対応できるように修正しています。その確認のため、３個目の`<div>`を追加、data-nameを仮に `score` としました。さらに同じ構造の`div.check-boxes`をいくつ追加していっても、プログラム側は修正不要になっているはずです。

テキスト修正

2020/05/09 03:41

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -268,7 +268,7 @@
 ```
-上記のコードでは、質問への追記内容に対応した他、以下の修正を入れています。
+上記のコードでは、質問への追記内容に対応した他、以下の点でも修正しています。

テキスト修正

2020/05/08 23:55

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -276,7 +276,7 @@
-- プログラムのほうを、 `div.check-boxes` が何個あっても対応できるように修正し、これが分かるように、３個目の`<div>`を追加（nameを仮に `score` としました。さらに同じ構造の `div`を追加しても、プログラム側が修正不要になっているはずです。）
+- プログラムのほうを、 `div.check-boxes` が何個あっても対応できるように修正し、これが分かるように、３個目の`<div>`を追加（nameを仮に `score` としました。さらに同じ構造の`div.check-boxes`を追加していっても、プログラム側は修正不要になっているはずです。）

テキスト修正

2020/05/08 20:41

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -6,9 +6,7 @@
-考え方としては、`.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は以下で得られます。
+まず、考え方として、`.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は以下で得られます。

テキスト追加

2020/05/08 20:37

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -135,3 +135,157 @@
 以上、参考になれば幸いです。
+### 補足：追記への対応
+ご質問に追記された内容に対応したコードの一例を挙げます。
+```html
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <title>Q259669</title>
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script src="https://unpkg.com/lodash"></script>
+    <script src="https://unpkg.com/lodash.product"></script>
+    <script>
+        $(function() {
+            $('button').on('click', function() {
+                const checkedValues = $('.check-boxes').map(function() {
+                    const values = $(this).find(':checked').get().map(e => +e.value);
+                    return { name: $(this).data('name'), values: values.length ? values : [0] };
+                }).get();
+                const names = checkedValues.map(({ name }) => name);
+                const product = _.product(...checkedValues.map(({ values }) => values));
+                const result = product.map(values => Object.fromEntries(_.zip(names, values)));
+                // resultをJSONにして hr の下に表示する。
+                $('#result').text(JSON.stringify(result, null , "\t"));
+            });
+        });
+    </script>
+</head>
+<body>
+<h3>size要素</h3>
+<div class="check-boxes" data-name="size">
+    <label><input type="checkbox" value="1100">1100</label>
+    <label><input type="checkbox" value="1200">1200</label>
+    <label><input type="checkbox" value="1300">1300</label>
+    <label><input type="checkbox" value="1400">1400</label>
+</div>
+<h3>use要素</h3>
+<div class="check-boxes" data-name="use">
+    <label><input type="checkbox" value="11">11</label>
+    <label><input type="checkbox" value="12">12</label>
+    <label><input type="checkbox" value="13">13</label>
+</div>
+<h3>score要素</h3>
+<div class="check-boxes" data-name="score">
+    <label><input type="checkbox" value="91">91</label>
+    <label><input type="checkbox" value="92">92</label>
+    <label><input type="checkbox" value="93">93</label>
+    <label><input type="checkbox" value="94">94</label>
+    <label><input type="checkbox" value="95">95</label>
+</div>
+<button type="button" style="margin: 50px;">検索</button>
+<hr />
+<pre id="result"/>
+</body>
+</html>
+```
+上記のコードでは、質問への追記内容に対応した他、以下の修正を入れています。
+- `<form>` を `<div>` にして、チェックボックスを囲むdivであることを示すclassを `check-boxes` とし、かつ、 `data-name` 属性にこのdivが含むチェックボックスの値の（`size` だったり `use`だったりの)名前を入れておく。
+- プログラムのほうを、 `div.check-boxes` が何個あっても対応できるように修正し、これが分かるように、３個目の`<div>`を追加（nameを仮に `score` としました。さらに同じ構造の `div`を追加しても、プログラム側が修正不要になっているはずです。）
+- 各チェックボックスの （`checkbox_1` などの） class は、プログラム側からは不要になったので、いったん削除
+上記に挙げた回答コードは（補足のほうも含め）、もしかすると、uwanosoraさんが作ろうとしているものの要件に対して、オーバースペック気味のものになっているかもしれませんので、あくまで参考に留めて頂ければ幸いです。