にしし ふぁくとりー:西村文宏 個人サイト

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

ラジオボタンのチェックを全部外す機能を作る方法 [入力フォーム]

ラジオボタンは一度どれかを選択すると「どれも選択しない状態」には戻せません。JavaScriptを使えば「どのラジオボタンにもチェックが入っていない状態」に戻す機能を用意することができます。「どれも選択しない」という選択肢を用意したい場合に使えます。

チェックボックス全部を一括ON/OFFする機能が用意されていると便利

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



上記の3つのラジオボタン項目のうち、選択できるのは1つだけです。どれか1つを選択した後に他のどれかを選択すると、最初の選択はキャンセルされます。
このラジオボタンは、1度どれかを選択してしまうと、「どれも選択していない状態」に戻すことはできません。そのため、「どれも選択しない」という選択肢を許可するのであれば「なし」という項目も用意しておく方が良いでしょう。

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



上記のラジオボタンのどれかを選択した上で、下部の「どれも選択しない」ボタンをクリックすると、ラジオボタンの選択を外すことができます。

ラジオボタンのチェックを全部外す機能を作る方法

上記のようなラジオボタンのチェックを外す機能を実現するJavaScriptソースは、以下のような感じです。

JavaScriptソース

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

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

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

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

HTMLソース

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

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

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---