可変するラジオボタンを表示しているとき「Uncaught TypeError: Cannot read properties of undefined (reading 'checked')」に出会った場合のエラー対処法をご紹介します。

ラジオボタンのチェック状態を確認

いくつかのリストのそれぞれにラジオボタンを設置し、選択させるUIを下記のように記述します。

See the Pen Uncaught TypeError: Cannot read properties of undefined (reading 'checked') by kaz12 Tech (@kaz12-Tech) on CodePen.

このときリストが2つ以上の場合は下記のJavaScriptは問題無く動作します。

console.log("length:", document.radio_form.radio_group.length)

しかし上記のJavaScriptはリストが1つの場合、lengthの取得ができず、undefinedが表示されます。

また、ラジオボタンのchecked属性も取得できないため下記のコードはタイトルのエラーを発生します。

document.radio_form.radio_group[0].checked
# Uncaught TypeError: Cannot read properties of undefined (reading 'checked')

このため上記方法でラジオボタンのチェックの確認を行っている場合、 リストの数が1の場合のみチェックができない現象が発生します。

Uncaught TypeError: Cannot read properties of undefined (reading 'checked')の回避策

form内のelementNameは同じ名前の要素が複数ある場合に展開されるため、この問題が発生します。
このためradio_group.lengthを取得してfor文でラジオボタンのチェックを行うと不具合の原因となります。
回避策としては下記のようにquerySelectorAllを使用すると
要素数に限らず常に取得できます。

document.radio_form.querySelectorAll('[name="radio_group"]').length

さらに下記のコードでは、radio_groupのコレクションの内、チェックされているボタンのlengthを取得します。

document.radio_form.querySelectorAll('[name="radio_group"]:checked').length

for文を回してラジオボタンのチェックをする必要もなくなるためお勧めです。