Javascriptを使ってチェックボックスのvalue値を全て取得したい

Javascriptを使用してチェックボックスにチェックが入っている物のvalue値を全て取得したいのでが上手くいきません。

やってみたことは以下の通りです。

eachを使用する。

HTML
1<tr>
2  <td>りんご</td>
3  <td>
4    <input type="checkbox" value="1" class="btn" id="checkbox" name="checkbox"/>
5  </td>
6</tr>
7<tr>
8  <td>みかん</td>
9  <td>
10    <input type="checkbox" value="2" class="btn" id="checkbox" name="checkbox"/>
11  </td>
12</tr>
13<tr>
14  <td>いちご</td>
15  <td>
16    <input type="checkbox" value="3" class="btn" id="checkbox" name="checkbox"/>
17  </td>
18</tr>
19
20<input type="submit" class="fbtn" id="rbtn" value="登録">

Javascript
1var checkbox = $('body input[type="checkbox"]').each(function(i, elem) {
2            elem.checked = true;
3          });

りんごとみかんを選択した結果　・・・　全てにチェックがつき、checkbox = r.fn.init(3)と表示される。

mapを使用する。

Javascript
1var checkbox = $('input[name=checkbox]:checked').map(function(){return $(this).val()
2}):

りんごとみかんを選択した結果　・・・　r.fn.init(2) ["1", "2", prevObject: r.fn.init(2)]と表示される。

value値は取れているようなのですが余計な文字が付いています。

りんごとみかんを選択した場合、checkboxに1と2のみ入るようにするにはどうすれば良いのでしょうか？
また、r.fn.init(2) [prevObject: r.fn.init(2)]はどういう意味なのでしょうか？

調べても分からず、どなたかお力添え頂けないかと質問をさせて頂きました。
お分かりになる方、ご教授頂けますと幸いです。

追記
調べた内容
「Javascript チェックボックス　value 取得」で検索→めぼしいページは大体見ましたが希望の結果にはなりませんでした。
「r.fn.init」で検索→このことについて記載されているページを見つけることができませんでした。

m.ts10806

2020/03/24 02:15

>調べても分からず調べたキーワード、参照した記事の例をご提示ください。

行動規範の内容に同意します

回答3件

r.fn.init(2) [prevObject: r.fn.init(2)]はどういう意味なのでしょうか？

jQueryライブラリによるArrayの派生オブジェクトの意味です。

class MyArray extends Array {

  constructor(...args){
    super(...args);
  }
  hoge() {
    console.log("hoge")
  }
}

let a = new MyArray();
a.prevObject = a;
a.push("A");
a.push("B");
console.log( a ); // MyArray(2) ["A", "B", prevObject: MyArray(2)]

ご質問の r.fn.init(2) は MyArray(2) に相当します。
propertyDescriptor によって、hoge() メソッドは見えませんが、インスタンスに直接付与した prevObject は見えています。

実装を突き詰めたい場合は、jQuery ソースのコードリーディングをおすすめします

投稿2020/03/24 03:18

AkitoshiManabe

総合スコア5434

退会済みユーザー

2020/03/24 05:06

ご丁寧に解説頂きありがとうございます！ようやく謎の文字列の意味がわかりました。ありがとうございました！

行動規範の内容に同意します

ベストアンサー

こんにちは

ご質問にある、以下のコード

修正前：

javascript
1var checkbox = $('input[name=checkbox]:checked').map(function(){ return $(this).val(); });

の末尾に、 .get() を追加して

修正後：

javascript
1var checkbox = $('input[name=checkbox]:checked').map(function(){ return $(this).val(); }).get();

とするといかがでしょうか？
以下は、上記の修正による動作確認用のサンプルです。（りんごといちごがデフォルトでチェックされているようにしました）

動作確認用サンプル: https://codepen.io/jun68ykt/pen/XWbxmva?editors=1011

参考： api.jquery.com - .get()

投稿2020/03/24 02:45

編集2020/03/24 02:56

jun68ykt

総合スコア9058

退会済みユーザー

2020/03/24 05:05

ご丁寧にサンプルまで頂いてありがとうございます！ get()を付けたら出来ました！ get()についてももっと調べて見ます！

jun68ykt

2020/03/24 05:59

どういたしまして。 > get()を付けたら出来ました！とのことでよかったです????

行動規範の内容に同意します

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2  document.querySelectorAll('.btn').forEach(x=>{
3    x.addEventListener('click',()=>{
4      var ch=[...document.querySelectorAll('.btn:checked')].map(x=>x.value);
5      console.log(ch);
6    });
7  });
8});
9