JQueryでチェックされた行のデータを取得する方法

以下のＪＳＰ（JQuery含む）があります。
チェックボックスが付いた行の商品id(${item.id})を取得して、配列idsに格納したいと思っています。
チェックされたか判断する「if (td[0].checked)」がうまく動作していない様で、チェックが付いていてもidsに格納されません。
どの様に修正すれば良いでしょうか？

html
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2    pageEncoding="UTF-8"%>
3
4<%-- taglibディレクティブタグで、使用するタグライブラリを宣言 --%>
5<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
6
7
8<!DOCTYPE html>
9<html>
10<head>
11<meta charset="UTF-8">
12<title>全部表示</title>
13<!--
14<script type="text/javascript" src="allitem.js"></script>
15-->
16</head>
17<body>
18
19<form method="get" action="/koshisample/saleBox" name="itemtable">
20<table>
21<thead>
22<tr>
23<th>chkbox</th>
24<th>ID</th>
25<th>商品名</th>
26<th>値段</th>
27</tr>
28</thead>
29<tbody>
30<c:forEach var="item" items="${itemlists}" varStatus="status">
31  <tr>
32  <td><input type="checkbox" id="chkbid" name="chkb"></td>
33    <td><input type="hidden" name="id" value="${item.id}">${item.id}</td>
34    <td>${item.namae}</td>
35    <td>${item.price }</td>
36  </tr>
37</c:forEach>
38</tbody>
39
40</table>
41<input type="submit" name="salebox" value="カゴに入れる" >
42<input type="button" name="test" id="test" value="test">
43</form>
44<input type="hidden" id="id1">
45<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
46<script>
47$('#test').on('click',function() {
48    var tr = $("tbody tr");
49    var ids = [];
50    var td = null;
51
52    tr.each(function() {
53    	 //contextにthisを指定することで、tr要素内のtdを対象としています。
54        td = $("td", this);
55
56        //画面上でチェックされた商品idのみを取得
57    	if (td[0].checked) {
58    		var tdid = $(td[1]).text();
59    		ids.push(tdid);
60    	}
61    	});
62    console.log(ids);
63
64    });
65
66</script>
67
68</body>
69</html>

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

回答1件

ベストアンサー

おなじidを振ってるようにみえます。idはユニークにしか付加できません

投稿2020/04/24 04:36

yambejp

総合スコア116724

kosshi_s

2020/04/24 04:45

ご指摘の通り、 <td><input type="checkbox" id="chkbid" name="chkb"></td> だと繰り返しでidが重複してしまうので、以下の様にidを削除しましたが、やはり結果は変わらずでした。 <td><input type="checkbox" name="chkb"></td>

yambejp

2020/04/24 04:52

こんな感じですかね・・・ $(function(){ $('#test').on('click',function(){ var ids=$('[name=chkb]:checked').map(function(){ return $(this).closest('tr').find('[name=id]').val(); }).get(); console.log(ids); }); });

kosshi_s

2020/04/24 06:54

ありがとうございました。すごい！＞$(this).closest('tr').find('[name=id]').val(); →これで今いる箇所の親要素のtrを取得し、その中でname属性が「id」のvalue値を取得 mapメソッドでオブジェクトで配列に格納し、最後にgetメソッドで普通の配列にしているのですね。

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