Formのラジオボタンリセット方法

質問

下記のradioボタンのグループr1、r2、r3、r4のうちグループr1とr2だけを同時にリセットする方法はありますか？

グループ1つリセットする方法はわかりますが、2つリセットになると方法が分かりません。

良い方法はありませんか？よろしくお願いします。

<form>
<p>
<input type="radio" name="r1" value="1" checked>1<br>
<input type="radio" name="r1" value="2">2<br>
<input type="radio" name="r1" value="3">3
</p>
<p>
<input type="radio" name="r2" value="a" checked>a<br>
<input type="radio" name="r2" value="b">b<br>
<input type="radio" name="r2" value="c">c
</p>
<p>
<input type="radio" name="r3" value="a" checked>a<br>
<input type="radio" name="r3" value="b">b<br>
<input type="radio" name="r3" value="c">c
</p>
<p>
<input type="radio" name="r4" value="a" checked>a<br>
<input type="radio" name="r4" value="b">b<br>
<input type="radio" name="r4" value="c">c
</p>
</form>

回答No.2

fujillin

＞グループ1つリセットする方法はわかりますが、2つリセットになると方法が分かりません。

例えばグループr1をリセットする関数ができているとして、r1の部分を変数groupNameなどに置換えて、
　function groupReset(groupName){ ～～ }
などと定義しておきます。

　groupReset("r1");
を実行すれば、r1がリセットされるので、

　groupReset("r1");
　groupReset("r2");
を実行すれば、ｒ1とｒ2がリセットされることになります。

あるいは、関数なんかにしないでベタに二つ並べてもできるはずです。

お礼

ご回答ありがとうございます。
悩んでた問題が解決しました。
ありがとうございました。

回答No.1

babu_baboo

もし、おつかいの ぶらうざが、Array#forEach と、document.querySelectorAll をつかえるのなら

　Array.prototype.forEach.call (
　　document.querySelectorAll ('form input[name="r1"], form input[name="r2"]'),
　　function (e) { e.checked = e.defaultChecked; }
　);

お礼

ご回答ありがとうございます。

一度、こちらで試してみたいと思います。

ありがとうございました。