addEventListenerの第一引数をinputで設定するとios10だけチェックボックスの値が取れないという罠

これは久々にハマったのでメモ

実装

テキスト入力エリアとチェックボックスが混在したフォームで、addEventListenerを使用してテキストエリアとチェックボックスの状態をチェックし、全て入力してチェックボックスにチェックを入れないと送信ボタンがアクティブにならない設計にしていた

document.body.addEventListener('input', watch_length);

問題点

ほとんどの端末では正常に動いていたが、ios10端末のみ全ての項目を入力しても送信ボタンがアクティブにならない

原因

チェックボックスの値が取れていなかったのが原因
addEventListenerの第一引数をinputで設定すると
なぜかios10だけチェックボックスの値が取れない。
引数をchangeにした場合は問題なく値を取得できる

document.body.addEventListener('change', watch_length);

解決方法

今回は時間がなかったので、inputとchangeでそれぞれ処理を2回走らせるというパワープレイで強引に解決

document.body.addEventListener('input', watch_length);
/* iOS10対策(これがないとチェックボックスの値が取れない) */
document.body.addEventListener('change', watch_length);