input 要素と form 要素はそれだけでいささか奇妙な動作を引き起こせます。
デモは次です。
HTMLコードの方も見るのが良いです。同じ name で type=”radio” な input 要素はいずれか一つだけチェックされるのが普通ですが、異常動作の方では二つチェックできます。これは同じ name であっても違うラジオボタンのセットであるとみなされているためです。 input 要素は form 要素と密接な関係にあり、 form 要素内で定義された input 要素はその form 要素に紐づけられます。先の説明は少々不足しており普通な動作とは、同じ form 内で同じ name で type=”radio” な input 要素はいずれか一つだけチェックされる、という動作だったわけです。
この form 要素への紐づけは input 要素のみで制御できます。デモは次です。
使っているのは input 要素の form 属性です。これを用いると DOM 構造に関係なく input 要素に紐づく form 要素を制御できます。
<input>： 入力欄 (フォーム入力) 要素 – HTML： HyperText Markup Language ｜ MDN#form
これらの仕組みは安易に用いると混乱を招くだけですが、少々特殊な状況でも対応できるだけの柔軟な仕組みです。適宜適量で活用するのがよいでしょう。
