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

Question

実現したいこと

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

前提

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

該当のソースコード

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

<script>
function checkboxOn(){

}
</script>

試したこと

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

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

Comments

[yambejp]

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

Answer 1

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

<script>
document.addEventListener('change',e=>{
  const t=e.target;
  if(t.matches('[name=item]')){
    t.closest('tr').querySelector('[type=checkbox]').checked=t.selectedIndex>0;
  }
});
</script>
<table>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>
<select name="item">
<option>商品を選択して下さい</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<select name="item">
<option>商品を選択して下さい</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<select name="item">
<option>商品を選択して下さい</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</tbody>
</table>

Comments

[hl4143]

HTMLとGASを組み合わせて作成していますが、ご教授いただいたコードで目的とすることが実現できました。うろ覚えのHTMLとJava Scriptで色々と試しながら作業しておりますが、この際、きちんと基礎からJava Scriptを勉強しようと思います。ありがとうございましたm(__)m。

Answer 2

checkboxOn() の中では this が変更された <select> になります。それを起点として、対応するチェックボックスを求めればよいでしょう。
たとえば、this.closest('tr').querySelector('input.chk') など。