javascript チェックされた行のデータを取得

このように繰り返されているhtmlから
チェックされた行のみの値を取り出すにはどうすればいいですか？

「チェックされた行のデータを抽出ボタン」押下の時にjsで値を利用したいです

$("[name='flag[]']:checked").each(function(i) {
checks[i] = $(this).val();
});
こんな書き方で取得できるかなあと思っていたのですがうまくいかず。。

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

回答2件

javascript
1$("[name='flag[]']:checked").each(function(i) { 
2  checks[i] = $(this).val(); 
3});

こちらの方法で、チェックされているinputタグのvalueの値は問題なく取得できています。

うまくいかない、行のみの値を取り出すという部分から察するに、
ボタンを押した時にインプットタグを囲っている<div class="row"></div>の中にある<div class="silver">・<div class="name">の表示されているテキストが取得したいのかな？と思いました。
であれば、チェックされているinputタグを囲っている.rowを$(this).closest('.row')などで取得して、その中から欲しい情報を取得するようにすれば良いかなと思います。
このような意図でないのであればスミマセン。

下記にサンプルを提示します。動作確認はしていませんので考える参考になればと。

html
1<div class="row">
2  <div class="silver">001</div>
3  <div class="name">001</div>
4  <div class="silver"><input type="checkbox" name="flag[]" value="1"></div>
5</div>
6<div class="row">
7  <div class="silver">002</div>
8  <div class="name">001</div>
9  <div class="silver"><input type="checkbox" name="flag[]" value="1"></div>
10</div>
11
12<button id="js-checkBtn">データをチェックするよ！</button>

javascript
1$(function() {
2  // データを取得して返す関数
3  var getkRowsData = function() {
4    var data = [];
5    $('input[name="flag[]"]:checked').each(function(i, elm) {
6      // this は inputタグです。 elm = this
7      // $(this).val() では チェックされているinputタグのvalueの値が取れます。
8      var $input = $(elm),
9          $row = $input.closest('.row'),
10          rowData;
11      if($row.length) {
12        rowData = {
13          silver: $row.find('.silver').text(),
14          name: $row.find('.name').text(),
15          inputValue: $input.val()
16        };
17        // チェックされているinputの取得された順に配列に入れるよ。
18        data[i] = rowData;
19      }
20    });
21    return data;
22  };
23
24  // ボタンをおした時のアクション
25  $('#js-checkBtn').on('click', function(evt) {
26    var rowsData = getkRowsData();
27    // 開発者ツールなどでコンソールを開いて確認してみてください。
28    console.log(rowsData);
29  });

※ この方法では、チェックされているinputの取得された順にデータが入るので、何番目の.rowのデータなのかというものは明確にしづらい可能性があります。
どの.rowのデータなのかを明確にさせるのであれば、data属性やIDなどを与えておいてやり、その情報を使ってあげるのが良いかなと思います。

html
1<!-- どの row か判別するために data-row-id という属性をつけた -->
2<div class="row" data-row-id="row-1">
3  <div class="silver">001</div>
4  <div class="name">001</div>
5  <div class="silver"><input type="checkbox" name="flag[]" value="1"></div>
6</div>
7<div class="row" data-row-id="row-2">
8  <div class="silver">002</div>
9  <div class="name">001</div>
10  <div class="silver"><input type="checkbox" name="flag[]" value="1"></div>
11</div>
12
13<button id="js-checkBtn">データをチェックするよ！</button>

javascript
1$(function() {
2  var getkRowsData = function() {
3    // キーが数字では無いかもしれないのでObjectに変更。
4    var data = {};
5    $('input[name="flag[]"]:checked').each(function(i, elm) {
6      var $input = $(elm),
7          $row = $input.closest('.row'),
8          rowID,
9          rowData;
10      if($row.length) {
11        // .rowのdata-row-id 属性を取得
12        rowID = $row.data('row-id');
13        rowData = {
14          silver: $row.find('.silver').text(),
15          name: $row.find('.name').text(),
16          inputValue: $input.val(),
17          rowID: rowID,
18        };
19        // data-row-id 属性の値をキーにしたオブジェクトにしてあげる
20        data[rowID] = rowData;
21      }
22    });
23    return data;
24  };
25
26  $('#js-checkBtn').on('click', function(evt) {
27    var rowsData = getkRowsData();
28    console.log(rowsData);
29  });
30});

投稿2015/08/18 09:13

KiKiKi_KiKi

総合スコア596

手元の環境では質問文のコードでも期待通りに動作しているようですが、個人的に修正するとしたらこんな感じでしょうか。
http://jsfiddle.net/jsss31fq/

JavaScript
1var values = jQuery('input[name="flag[]"]:checked').map(function (i, value) { 
2  return value.value;
3});
4
5console.log(values); // [1, 2]