htmlで動的配置したselectについてonchangeイベントを構築したい

実現したいこと

・HTML内に動的配置したcheckboxとselectを10行作成しました（checkbox と select の name はそれぞれ同一です）。
・その中のselectを変更した際にcheckboxをcheckedにする方法について知りたいです。

前提

nameが同一であれば、getElementsByName()メソッドで配列として取得できることは理解しています。

該当のソースコード

HTML
1〜省略〜
2            <? for (var p =0; p < 10; p++){ ?>
3              <tr>
4                <td><input type="checkbox" name="chk" class="chk"/td>
5                <td><select name="item" class="item2" onchange="checkboxOn()">
6                  <option>商品を選択して下さい</option>
7                    <? for (n = 0; n < itemArray.length; n++){ ?>
8                        <option><?= itemArray[n][1] ?></option>                  
9                    <? } ?>
10                </select></td>
11                <td bgcolor="#ffffdb"><input name="num" class="num" type="number"value="0" style="text-align:right">
12             </tr>
13            <? } ?>

javascript
1<script>
2function checkboxOn(){
3
4}
5</script>

試したこと

javascript内でfor文を使って、要素を１つずつ取得する方法があることはわかりましたが、「どのselectが変更されたか」といういわゆる「添字」（表現が違っていたらすみません）を取得したいと思っています。

質問内容が端的に表現できているか非常に不安ではありますが、お力をお貸しいただければ幸甚です。よろしくお願いいたいます。

yambejp

2023/02/17 08:43 編集

繰り返し部分サーバーサイドプログラムを利用していますか？セレクトボックスとチェックボックスの関係がよくわからないです。 HTMLでサンプルを書けないですか？

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

回答2件

ベストアンサー

最大限好意的に解釈してこんな感じ

javascript
1<script>
2document.addEventListener('change',e=>{
3  const t=e.target;
4  if(t.matches('[name=item]')){
5    t.closest('tr').querySelector('[type=checkbox]').checked=t.selectedIndex>0;
6  }
7});
8</script>
9<table>
10<tbody>
11<tr>
12<td><input type="checkbox"></td>
13<td>
14<select name="item">
15<option>商品を選択して下さい</option>
16<option value="1">1</option>
17<option value="2">2</option>
18<option value="3">3</option>
19</select>
20</td>
21</tr>
22<tr>
23<td><input type="checkbox"></td>
24<td>
25<select name="item">
26<option>商品を選択して下さい</option>
27<option value="1">1</option>
28<option value="2">2</option>
29<option value="3">3</option>
30</select>
31</td>
32</tr>
33<tr>
34<td><input type="checkbox"></td>
35<td>
36<select name="item">
37<option>商品を選択して下さい</option>
38<option value="1">1</option>
39<option value="2">2</option>
40<option value="3">3</option>
41</select>
42</td>
43</tr>
44</tbody>
45</table>