Q&A
最後が"_u"になっているので最後のだけ整合性とれないですが、それで良いですか？
実現したいことは、チェックボックスで選択された値を取得し、オブジェクトを配列に格納することです。
チェックボックスには２つの要素があり、いずれも複数選択できるようにしたいと思っています。
###チェックされた項目の全てのパターン(size要素が２つ選択・use要素が３つ選択されて入ればresult2には６つのオブジェクトを入れるような)を取得したいですが、コードの書き方がわからず躓いております。
下記のコードでresultにオブジェクトを入れることはできましたが、本来はresult2のようにしたいと思っています。
var result = {size:1100, use:11}; var result2 = [{size:1100, use:11},{size:1100, use:12},{size:1100, use:13},.....]; $(function(){ var result = {}; var a = $('input[class=checkbox_1]:checked').map(function(){ result['size'] = $(this).val(); console.log(result); }).get(); var b = $('input[class=checkbox_2]:checked').map(function(){ result['use'] = $(this).val(); console.log(result); }).get(); }); //size要素 <form> <label> <input type="checkbox" class="checkbox_1" value="1100">1100</label> <label> <input type="checkbox" class="checkbox_1" value="1200">1200</label> <label> <input type="checkbox" class="checkbox_1" value="1300">1300</label> <label> <input type="checkbox" class="checkbox_1" value="1400">1400</label> </form> //use要素 <form> <label> <input type="checkbox" class="checkbox_2" value="11">11</label> <label> <input type="checkbox" class="checkbox_2" value="12">12</label> <label> <input type="checkbox" class="checkbox_2" value="13">13</label> </form>
追記
私の説明不足ではあるのですが、検索ボタンを押した時に配列を取得したいと思っておりまして、片方の要素だけチェックが入っている時でも配列を作ることができればと考えております。
その場合は、検索ボタンを押した直後にの条件分岐などで処理を分けるのが適切なやり方でしょうか。何かスマートなやり方があればご教授いただけないでしょうか。
一番初めのオブジェクトでuseが選択されなかった場合は、以下のように0などを入れられたらと思っています。
var result2 = [{size:1100, use:0},{size:1100, use:12},{size:1100, use:13},.....];
回答3件
0
FormData
個人的には、new FormData を作れば、独自オブジェクトは不要ではないかと思います。
HTML
1<!DOCTYPE html> 2<title>sample</title> 3<form> 4 <fieldset> 5 <legend>size</legend> 6 <label><input type="checkbox" name="size" value="1100" checked>1100</label> 7 <label><input type="checkbox" name="size" value="1200" checked>1200</label> 8 <label><input type="checkbox" name="size" value="1300">1300</label> 9 <label><input type="checkbox" name="size" value="1400">1400</label> 10 </fieldset> 11 <fieldset> 12 <legend>use</legend> 13 <label><input type="checkbox" name="use" value="11" checked>11</label> 14 <label><input type="checkbox" name="use" value="12" checked>12</label> 15 <label><input type="checkbox" name="use" value="13" checked>13</label> 16 <label><input type="checkbox" name="use" value="14">14</label> 17 </fieldset> 18</form> 19<script> 20'use strict'; 21const formData = new FormData(document.querySelector('form')); 22 23console.log(JSON.stringify([...formData])); // [["size","1100"],["size","1200"],["use","11"],["use","12"],["use","13"]] 24console.log(formData.getAll('size')); // ["1100", "1200"] 25console.log(formData.getAll('use')); // ["11", "12", "13"] 26 27if (formData.getAll('size').length > 1 && formData.getAll('use').length > 2) { 28 console.log('foo'); 29} 30</script>
size-useの対応関係が重要なら、data-index="1" 属性を持たせる等の工夫はしますが、最適解は最終目標次第ですね。
Re: uwanosora さん
投稿2020/05/08 02:58
総合スコア18189
0
ひとまず「作り方のヒント」
先に[]作っておいてpushしていくと良いかと。
js
1result = []; 2result.push({hoge:1,hoge2:2}); 3result.push({hoge:1,hoge2:2}); 4result.push({hoge:1,hoge2:2}); 5result.push({hoge:1,hoge2:2}); 6 7console.log(result);
ただ、「それぞれ回す」というのは非効率なので、
「必ずペアになる」のであれば、要素数をforとかでループさせてn番目をとってきて同時に入れていった方がやりやすいと思います。
投稿2020/05/07 20:03
総合スコア80875
0
ベストアンサー
こんにちは
自分ならこうやるかなと思ったコードを挙げておきます。
まず、考え方として、.checkbox_1 のほうで選ばれている値の配列と、.checkbox_2 のほうで選ばれている値の配列を、それぞれ集合と考えれば、result2 はこれら２つの集合の直積集合から作ることができます。そこで、直積集合に相当する配列を得るにはどうしたらよいかと考えると、自分で書くのももちろんよいですが、ライブラリの力を借りるという手もあります。配列やオブジェクトの操作で便利なライブラリ lodash と、これのプラグインとして、直積を作ってくれるlodash.product を使うと、result2は以下で得られます。
javascript
1$('[type=checkbox]').on('change', function() { 2 const checkedValues = [1, 2].map(i => $(`.checkbox_${i}:checked`).get().map(e => +e.value)); 3 const result2 = _.product(...checkedValues).map(([size, use]) => ({ size, use })); 4});
以下は、上記の動作確認用のHTMLです。<hr /> の下に result2をJSONにして表示します。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Q259669</title> 6 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 7 <script src="https://unpkg.com/lodash"></script> 8 <script src="https://unpkg.com/lodash.product"></script> 9 <script> 10 $(function() { 11 $('[type=checkbox]').on('change', function() { 12 const checkedValues = [1, 2].map(i => $(`.checkbox_${i}:checked`).get().map(e => +e.value)); 13 const result2 = _.product(...checkedValues).map(([size, use]) => ({ size, use })); 14 15 // result2をJSONにして hr の下に表示する。 16 $('#result2').text(JSON.stringify(result2, null , " ")); 17 }); 18 }); 19 </script> 20</head> 21<body> 22 23//size要素 24<form> 25 <label> 26 <input type="checkbox" class="checkbox_1" value="1100">1100</label> 27 <label> 28 <input type="checkbox" class="checkbox_1" value="1200">1200</label> 29 <label> 30 <input type="checkbox" class="checkbox_1" value="1300">1300</label> 31 <label> 32 <input type="checkbox" class="checkbox_1" value="1400">1400</label> 33</form> 34 35//use要素 36<form> 37 <label> 38 <input type="checkbox" class="checkbox_2" value="11">11</label> 39 <label> 40 <input type="checkbox" class="checkbox_2" value="12">12</label> 41 <label> 42 <input type="checkbox" class="checkbox_2" value="13">13</label> 43</form> 44 45<hr /> 46<pre id="result2"/> 47 48</body> 49</html>
以上、参考になれば幸いです。
補足：追記への対応
ご質問に追記された内容に対応したコードの一例を挙げます。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Q259669</title> 6 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 7 <script src="https://unpkg.com/lodash"></script> 8 <script src="https://unpkg.com/lodash.product"></script> 9 <script> 10 $(function() { 11 $('button').on('click', function() { 12 13 const checkedValues = $('.check-boxes').map(function() { 14 const values = $(this).find(':checked').get().map(e => +e.value); 15 return { name: $(this).data('name'), values: values.length ? values : [0] }; 16 }).get(); 17 18 const names = checkedValues.map(({ name }) => name); 19 const product = _.product(...checkedValues.map(({ values }) => values)); 20 const result = product.map(values => Object.fromEntries(_.zip(names, values))); 21 22 // resultをJSONにして hr の下に表示する。 23 $('#result').text(JSON.stringify(result, null , "\t")); 24 }); 25 }); 26 </script> 27</head> 28<body> 29 30<h3>size要素</h3> 31<div class="check-boxes" data-name="size"> 32 <label><input type="checkbox" value="1100">1100</label> 33 <label><input type="checkbox" value="1200">1200</label> 34 <label><input type="checkbox" value="1300">1300</label> 35 <label><input type="checkbox" value="1400">1400</label> 36</div> 37 38<h3>use要素</h3> 39<div class="check-boxes" data-name="use"> 40 <label><input type="checkbox" value="11">11</label> 41 <label><input type="checkbox" value="12">12</label> 42 <label><input type="checkbox" value="13">13</label> 43</div> 44 45<h3>score要素</h3> 46<div class="check-boxes" data-name="score"> 47 <label><input type="checkbox" value="91">91</label> 48 <label><input type="checkbox" value="92">92</label> 49 <label><input type="checkbox" value="93">93</label> 50 <label><input type="checkbox" value="94">94</label> 51 <label><input type="checkbox" value="95">95</label> 52</div> 53 54<button type="button" style="margin: 50px;">検索</button> 55 56<hr /> 57<pre id="result"/> 58 59</body> 60</html>
上記のコードでは、質問への追記内容に対応した他、以下の点でも修正しています。
-
<form>を<div>にして、チェックボックスを囲むdivであることを示すclassをcheck-boxesとし、かつ、data-name属性にこのdivが含むチェックボックスの値の（sizeだったりuseだったりの)名前を入れておく。 -
プログラムのほうを、
div.check-boxesが何個あっても対応できるように修正しています。その確認のため、３個目の<div>を追加、data-nameを仮にscoreとしました。さらに同じ構造のdiv.check-boxesをいくつ追加していっても、プログラム側は修正不要になっているはずです。 -
各チェックボックスの （
checkbox_1などの） class は、プログラム側からは不要になったので、いったん削除
上記に挙げた回答コードは（補足のほうも含め）、もしかすると、uwanosoraさんが作ろうとしているものの要件に対して、オーバースペック気味のものになっているかもしれませんので、あくまで参考に留めて頂ければ幸いです。
投稿2020/05/07 21:44
編集2020/05/09 08:41
総合スコア9058
回答ありがとうございます。ほとんど思い通りの動作をしており多変助かりました。
もう一つ実現したいことがありまして、追記にて記載しておりますのでご教授いただけないでしょうか。
コメントありがとうございます。
ご質問への追記内容に対応するコードを、回答のほうに補足として挙げました。
参考になれば幸いです。
追記に返答いただきありがとうございます。回答頂いたコードを解読して自分でも書けるように勉強したいと思います！大変助かりました。
どういたしまして????
> 大変助かりました。
とのことでよかったです????
あなたの回答
tips
プレビュー
