ボタンによるラジオボタンのクリアを１つのフォームで複数回実行したい

実現したいこと

１つのフォーム内で、ラジオボタンでの選択項目が複数回あり
その全ての項目それぞれに、ラジオボタンの選択を解除するようなボタンを作りたいです。
（例：砂糖は砂糖のクリアボタンで解除、塩は塩のクリアボタンで解除）

ラジオボタンを押して解除することは、今回は考えておらず
各項目のクリアボタンを押したら解除されるような仕組みにしたいです。
![]

試したこと

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>テスト</title>
</head>
<body>
  <form>
    <div class="formArea">
      <p class="formArea__title">砂糖</p>
      <div class="formArea__content">
        <input type="radio" id="form-sugar01" name="sugar" value="要" title="sugar"><label for="form-sugar01">要</label>
        <input type="radio" id="form-sugar02" name="sugar" value="不要" title="sugar"><label for="form-sugar02">不要</label>
        <button type="button" onclick="radioDeselection()" class="formArea__btn">クリア</button>
      </div>
    </div>
    <div class="formArea">
      <p class="formArea__title">塩</p>
      <div class="form__content">
        <input type="radio" id="form-salt01" name="salt" value="要" title="salt"><label for="form-salt01">要</label>
        <input type="radio" id="form-salt02" name="salt" value="不要" title="salt"><label for="form-salt02">不要</label>
        <button type="button" onclick="radioDeselection()" class="formArea__btn">クリア</button>
      </div>
    </div>
    <div class="formArea">
      <p class="formArea__title">バター</p>
      <div class="formArea__content">
        <input type="radio" id="form-butter01" name="butter" value="要" title="butter"><label for="form-butter01">要</label>
        <input type="radio" id="form-butter02" name="butter" value="不要" title="butter"><label for="form-butter02">不要</label>
        <button type="button" onclick="radioDeselection()" class="formArea__btn">クリア</button>
      </div>
    </div>
  </form>
<script>
  function radioDeselection() {
    for (const element of document.getElementsByID('sugar')) {
      element.checked = false;
    }
  }
  function radioDeselection() {
    for (const element of document.getElementsByName('salt')) {
      element.checked = false;
    }
  }
  function radioDeselection() {
    for (const element of document.getElementsByName('butter')) {
      element.checked = false;
    }
  }
</script>
</body>
</html>

上記のようにすると、一番下のボタンしか反応せず、また他項目のクリアのボタンを押しても
一番下の項目のラジオボタンが解除されるなど、思ったような動作になりません。

radioDeselectionが最後の１つにしか使用できないのかと思い、resetradioに置き換えて下記のように記述してみましたが
同様にうまくいきませんでした。

<body>
  <form>
    <div class="formArea">
      <p class="formArea__title">砂糖</p>
      <div class="formArea__content">
        <input type="radio" id="form-sugar1" name="sugar" value="要" title="sugar"><label for="form-sugar1">要</label>
        <input type="radio" id="form-sugar2" name="sugar" value="不要" title="sugar"><label for="form-sugar2">不要</label>
        <a href="javascript:void(0);" onclick="resetradio()" class="formArea__btn">clear</a>
      </div>
    </div>
    <div class="formArea">
      <p class="formArea__title">塩</p>
      <div class="form__content">
        <input type="radio" id="form-salt1" name="salt" value="要" title="salt"><label for="form-salt1">要</label>
        <input type="radio" id="form-salt2" name="salt" value="不要" title="salt"><label for="form-salt2">不要</label>
        <a href="javascript:void(0);" onclick="resetradio()" class="formArea__btn">clear</a>
      </div>
    </div>
    <div class="formArea">
      <p class="formArea__title">バター</p>
      <div class="formArea__content">
        <input type="radio" id="form-butter1" name="butter" value="要" title="butter"><label for="form-butter1">要</label>
        <input type="radio" id="form-butter2" name="butter" value="不要" title="butter"><label for="form-butter2">不要</label>
        <a href="javascript:void(0);" onclick="resetradio()" class="formArea__btn">clear</a>
      </div>
    </div>
  </form>
<script type="text/javascript">
function resetradio() {
    for (i = 1; i <= 2; i++) {
        document.getElementById('form-sugar' + i).checked = false;
    }
}
function resetradio() {
    for (i = 1; i <= 2; i++) {
        document.getElementById('form-salt' + i).checked = false;
    }
}
function resetradio() {
    for (i = 1; i <= 2; i++) {
        document.getElementById('form-butter' + i).checked = false;
    }
}
</script>

ご教示いただきたいです。

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

回答2件

ベストアンサー

クリアが必須ではないければ、デフォルト値を隠しておくというのが無難かと
（本来ラジオボタンはデフォルト値を設定しておいたほうがよいとされています）

投稿2020/11/05 04:26

yambejp

総合スコア115010

yambejp

2020/11/05 04:27

pondering

2020/11/05 06:13

ご回答をいただきありがとうございます。 HTMLとCSSで実現できるのですね。そして、デフォルト値設定についても教えていただきありがとうございました。追加での質問となってしまうのですが各項目、それぞれ選択必須項目とする場合は（例：砂糖⇒選択必須、塩⇒選択必須）この場合ですと、初期値のcheckedを外したとしても一度クリアボタンを押してしまえば表示している条件以外でも送信できてしまうと思いますがそのような場合は、『要、不要』のinputにrequiredを設定することで必須項目となるのでしょうか。

yambejp

2020/11/06 00:22

選択必須という条件が加わる場合はデフォルト値をつけるという処理はできませんただその場合はラジオボタンをクリアする意味がないので、デフォルトとクリア機能をなくせばよいような気がします（フォーム全体に対してreset機能はあっても良いかもしれません）

pondering

2020/11/12 05:08

その場合はラジオボタンをクリアする意味がない＞たしかに、おっしゃる通りですね。ご回答いただきありがとうございました。

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

元のコードのおかしいところは
同じ名前の関数resetradioが3つ登録されていたところです。
なので3つとも別名にして

Javascript
1    <script type="text/javascript">
2        function resetradio() {
3            for (i = 1; i <= 2; i++) {
4                document.getElementById('form-sugar' + i).checked = false;
5            }
6        }
7        function resetradio2() {
8            for (i = 1; i <= 2; i++) {
9                document.getElementById('form-salt' + i).checked = false;
10            }
11        }
12        function resetradio3() {
13            for (i = 1; i <= 2; i++) {
14                document.getElementById('form-butter' + i).checked = false;
15            }
16        }
17    </script>

あとはそれと同様に各種<a>タグのonclick="resetradio()"をonclick="resetradio1()
onclick="resetradio2()"に変更してください
例

html
1<a href="javascript:void(0);" onclick="resetradio2()" class="formArea__btn">clear</a>

投稿2020/11/05 05:49

編集2020/11/05 06:00

Jon_do

総合スコア1373

pondering

2020/11/05 06:18

回答をくださり、ありがとうございました。疑問に思っていた、分かっていなかった部分をピンポイントでご指摘いただき、感謝です。関数名を変えたところきちんと動作しました。教えて頂きありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！