jsでinputを取得してイベントを処理したい

wordpressでプラグインのコンタクトフォーム7を使っています。
以下のようなチェックボックス群を出力させました。

<form name="specialistForm" class="wpcf7-form init" action="xxxxxxx">
  <input class="hide" type="checkbox" name="recipient[]" value="test1@gmail.com">
  <input class="name" type="checkbox" name="spacialist01[]" value="AAA" >
  <input class="hide" type="checkbox" name="recipient[]" value="test2@gmail.com">
  <input class="name" type="checkbox" name="spacialist01[]" value="BBB" >
  <input class="hide" type="checkbox" name="recipient[]" value="test3@gmail.com">
  <input class="name" type="checkbox" name="spacialist01[]" value="CCC" >
</form>

これらのcheckboxのspacialist01のみをjsで取得し、foreachで回してイベント処理をさせたいです。
(spacialist01の後に[]をつけているのはメールで配列として受け取るために必要みたいです。これがないと複数選択しても値が１つだけ出力されたメールが届きました)

クリックしたspacialist01の前に隣接するcheckbox(recipient[])を、チェックtrueにするのが目的です。
spacialist01の選択肢によって、それぞれ違うメールアドレスが裏側で選択されるようにしたいです。

以下試しているコードです。

  if(document.specialistForm !== undefined){
    let list = document.specialistForm.getElementsByClassName('name');
    // let list = document.specialistForm.spacialist01;
    // let list = $('.Consultsingle_wrap .form input[class="name"]');
    console.log(list);
    list.forEach(function (item) {
      item.addEventListener('click', function(){
        if(item.checked === true){
          console.log(item.checked);
          console.log(item.previousElementSibling);
          item.previousElementSibling.checked = true;
        } else {
          console.log(item.checked);
          console.log(item.previousElementSibling);
          item.previousElementSibling.checked = false;
        }
      })
    });
  }

console.log(list)でみる限り、配列は取得できています。

HTMLCollection (2)
0 
<input checked="checked" class="name" id="テストさんB" type="checkbox" name="spacialist01[]" value="テストさんB">
1 
<input class="name" id="テストさんA" type="checkbox" name="spacialist01[]" value="テストさんA">

しかし以下のエラーが出てしまいます。
▼エラー
TypeError: undefined is not a function (near '...list.forEach...')

このエラーの原因が掴めずでして、どのような解決できますでしょうか？
よろしくお願いします。

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

回答1件

ベストアンサー

ソースコードをこちらで確認しましたところ
定義されているlistが
HtmlCollectionとなっていて、配列ではなかったので、foreach文が使えないのが原因です。

javascript
1if(document.specialistForm !== undefined){
2  let list = document.specialistForm.getElementsByClassName('name');
3  // let list = document.specialistForm.spacialist01;
4  // let list = $('.Consultsingle_wrap .form input[class="name"]');
5  console.log(list);
6  list = Array.from( list ) ;
7  list.forEach(function (item) {
8    item.addEventListener('click', function(){
9      if(item.checked === true){
10        console.log(item.checked);
11        console.log(item.previousElementSibling);
12        item.previousElementSibling.checked = true;
13      } else {
14        console.log(item.checked);
15        console.log(item.previousElementSibling);
16        item.previousElementSibling.checked = false;
17      }
18    })
19  });
20}