Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:48.

ラジオボタンのチェックを全部外す

「ラジオボタン」というのは、複数の項目のうち「どれか1つだけ」を選択できるフォームのことです。例えば以下のような感じ。




上記の3つの項目のうち、選択できるのは1つだけです。どれか1つを選択した上で、他のどれかを選択すると、最初の選択はキャンセルされます。これが「ラジオボタン」です。

このラジオボタンは、1度どれかを選択してしまうと、「どれも選択していない状態」に戻すことができません。そのため、「どれも選択しない」という選択肢を許可するのであれば、「なし」という項目も用意しておく方が良いでしょう。

しかし、何らかの理由で「なし」という項目を用意したくない場合は、JavaScriptを使って、「ラジオボタンのチェックを外す」こともできます。
例えば、以下のような感じで。




上記のラジオボタンのどれかを選択した上で、「どれも選択しない」ボタンをクリックすると、ラジオボタンの選択を外すことができます。
これを実現するJavaScriptソースは、以下のような感じです。

<script type="text/javascript"><!--
function offradio() {
   var ElementsCount = document.sample.elements.length; // ラジオボタンの数
   for( i=0 ; i<ElementsCount ; i++ ) {
      document.sample.elements[i].checked = false;
   }
}
// --></script>

上記では、指定フォーム内のラジオボタンのチェックを外す「offradio」関数を作成しています。
(※もし同一フォーム内にチェックボックスが存在すれば、それらのチェックも一緒に外してしまいます。^^;)

ソース中に2カ所出てくる「sample」は、対象とするフォーム(form要素)に加えた名称です。name属性を使って指定します。ここは、自分で作成したフォーム名に書き換える必要があります。(下記のサンプルHTMLをそのまま使う場合は書き換え不要ですが。)
ソース内の各部分の意味は、前回の「チェックボックス全部を一括ON/OFFする」の解説を読んでください。ほとんど全部一緒ですので。(^_^;)

次に、HTMLソースを以下のように書きます。

<form name="sample">
   <p>
   <input type="radio" name="rb" id="r1" value="1" /><label for="r1">ラジオボタン1</label><br />
   <input type="radio" name="rb" id="r2" value="2" /><label for="r2">ラジオボタン2</label><br />
   <input type="radio" name="rb" id="r3" value="3" /><label for="r3">ラジオボタン3</label><br />
   </p>
   <p><input type="button" value="どれも選択しない" onclick="offradio();" /></p>
</form>

form要素には必ずname属性を使ってフォーム名を指定しておきます。そうしないと、JavaScriptから扱えませんから。上記では「sample」という名称を付加していますが、名称は自由に決定できます。同一ページ内に同じ名称のフォームを複数作らないように注意してください。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど