We Blog Weblog

解除できるラジオボタン

Web

2024年9月25日

ラジオボタン ラジオボタン

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「解除できるラジオボタン」を作ってみました。

解除ボタン設置

参考:Qiita|ラジオボタンで選択済みの項目を解除する

ラジオボタンと解除ボタンを設置します。

<input type="radio" name="geats" id="magnum" checked>
<label for="magnum">マグナム</label>

<input type="radio" name="geats" id="boost">
<label for="boost">ブースト</label>

<input type="radio" name="geats" id="zombie">
<label for="zombie">ゾンビ</label>

<input type="radio" name="geats" id="ninja">
<label for="ninja">ニンジャ</label>

<input type="radio" name="geats" id="beat">
<label for="beat">ビート</label>

<input type="radio" name="geats" id="monster">
<label for="monster">モンスター</label>

<input type="radio" name="geats" id="fever">
<label for="fever">フィーバー</label>

<button type="button" id="clear-button">はずす</button>

解除ボタンをクリックするとラジオボタンのcheckedが外れるようにします。

document.getElementById("clear-button").addEventListener("click", () => {
  document.querySelector("input[name='geats']:checked").checked = false;
});

クリックで選択解除

引き続きさっきのサイトを参考にしてやってみます。

ラジオボタンを設置します。

左、真ん中、右からそれぞれ1つずつ選べるようにしてみました。
本当はフォ〇ゼのア〇トロスイッチでやる予定でしたが数が多すぎたのでオー〇メダルにしました。

<input type="radio" name="ooo1" id="kuwagata">
<label for="kuwagata">クワガタ</label>

<input type="radio" name="ooo2" id="kamakiri">
<label for="kamakiri">カマキリ</label>

<input type="radio" name="ooo3" id="batta" checked>
<label for="batta">バッタ</label>

<input type="radio" name="ooo1" id="lion">
<label for="lion">ライオン</label>

<input type="radio" name="ooo2" id="tora" checked>
<label for="tora">トラ</label>

<input type="radio" name="ooo3" id="cheetah">
<label for="cheetah">チーター</label>
    ・
    ・
    ・
<input type="radio" name="ooo1" id="ptera">
<label for="ptera">プテラ</label>

<input type="radio" name="ooo2" id="tricera">
<label for="tricera">トリケラ</label>

<input type="radio" name="ooo3" id="tyranno">
<label for="tyranno">ティラノ</label>

スクリプトを記述します。

document.querySelectorAll("input[name=ooo1]").forEach((radio) => {
  radio.addEventListener("click", () => {
    if (radio.classList.contains("is-checked")) {
      radio.classList.remove("is-checked");
      radio.checked = false;
    } else {
      document
        .querySelectorAll("input[name='ooo1'].is-checked")
        .forEach((checkedRadio) => {
        checkedRadio.classList.remove("is-checked");
      });
      radio.classList.add("is-checked");
    }
  });
});

name="ooo2"とname="ooo3"も同様に記述します。

なんで1個目のquerySelectorAllはname=ooo1で2個目のquerySelectorAllはname='ooo1'なんでしょうね。難しい・・・

まとめ

ラジオボタン

上記サイトでも言及されていましたが、ラジオボタンは1個しか選べない、クリックで解除できない、未選択状態にできない、っていうのはもう常識になりつつあるので今回の「解除できるラジオボタン」の出番はあんまりないかもですね。

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP