【おやじのweb技】 html/javascript/css等の基本技
winXP+IE6

TopPage表示 /  保 存 /  印 刷 /  Window Resize /  Window Close

b001

ラジオボタンを用いる

【目 次】
【技b005-1】ラジオボタンを用いる(基本)
【技b005-2】ラジオボタンを修飾する(スタイル属性)
   マウスカーソルの形ちを変更
   ラジオボタンの背景色や枠を飾る
   ラジオボタンや文字にマウスカーソルを重ねると背景色が変化する
【技b005-3】ラジオボタンがクリック(選択)されたらボタンと文字の背景色が変わる
   選択したラジオボタンのみ、背景色を変更
   選択したラジオボタンと文字の両方の背景色を変更
【技b005-4】文字をクリックしてもラジオボタンが選択される
【技b005-5】
   [1]ラジオボタンをクリックするとセルの背景色が変わる
   [2]リンク文字を選択するとラジオボタンを選択したり使用可能/不可を切り替える
【技b005-6】
   [1]どのボタンが選択されているか判定する
   [2]選択されたラジオボタンによって実行するスクリプトを変える
【解説等】

web工房  Copyright(C) 2004 web工房 All Rights Reserved 
このページのトップに戻る /  Window Resize /  Window Close /  最終更新日表示

action
&
web技

topへ目次へ前へ次へ
【技b005-1】ラジオボタンを用いる(基本)

グループ1
 [R1]ラジオボタン
 [R2]ラジオボタン
 [R3]ラジオボタン
グループ2
 [R4]基本型
 [R5]チェック
 [R6]使用不可
【ラジオボタン??】
 ラジオボタンは、表示された複数の選択肢(ラジオボタン)からひとつだけ選択するときに用います。ボタンの形状は○で選択すると○の中に・が表示されます。なお、選択肢を複数選択する場合はチェックボックスを用います。


【ラジオボタンを用いてみる】
ラジオボタンをチェックできますがそれ以外の動作はしません

※同じグループ内で、ひとつのラジオボタンのみ選択できます
※最初にチェックを入れておくこと、最初は使用不可にしておくことができます(グループ2)

◆手順【html】ラジオボタンの基本記述
※<form>〜</form>に記述します
※グループ毎にname属性は同じにします

※記述例
<form name="FORM1">
グループ1
 <input type="radio" name="Rad_11">[R1]ラジオボタン
 <input type="radio" name="Rad_11">[R2]ラジオボタン
 <input type="radio" name="Rad_11">[R3]ラジオボタン
グループ2
 <input type="radio" name="Rad_12" value="R4">[R4]基本型
 <input type="radio" name="Rad_12" value="R5" checked title="最初にチェックしておくラジオボタン">[R5]チェック
 <input type="radio" name="Rad_12" value="R6" disabled title="最初は使用不可にしておくラジオボタン">[R6]使用不可
</form>

※ラジオボタンのタグ(type="radio")
  type属性:<input type="radio"〜>
  name属性:<input type="radio" name="□□" >
  value属性:<input type="radio" value="□□"> 設定された値
※グループ毎に同じname属性にします

※チェックしておくとき:
 <input type="radio" checked>  最初にチェックされている
※無効化するとき:
 <input type="radio" disabled>  ボタン内が灰色になり使用不可

topへ目次へ前へ次へ
【技b005-2】ラジオボタンを修飾する(スタイル属性)

 [R1]基本型
 [R2]使用不可

■マウスカーソルの形ちを変更します(style属性)
※ラジオボタンにマウスを重ねて下さい
◆<input type="radio" name="Rad_21" disabled style="cursor:not-allowed;">[R2]使用不可

※マウスカーソルの変更の詳細は
 [技m016]マウスカーソルの形を変える、を参照して下さい。

 [R1]基本型

 [R2]背景色

 [R3]枠  

 [R4]背景色

  [R5]枠  

■ラジオボタンの背景色や枠を飾ります
◆<input type="radio" name="Rad_22"
 style="border-style:solid;border-color#c0c0c0;border-width:2x;">[R3]枠
※背景色や枠の変更(style属性)
  背景色:background-color
  枠の色:border-color
  枠のスタイル:border-style
  枠の太さ:border-width
※ラジオボタンと文字の両方を同じ背景色、同じ枠内にするときは<span>〜</span>で囲み、<span〜に>style属性を設定します
 <span style="background-color:#c0c0c0">
  <input type="radio" name="Rad_22">[R4]背景色
 </span>

※枠のスタイルの詳細は
 [技c003]テーブル(表)の枠線の種類や色・幅を指定する、を参照して下さい。

  [R4]背景色

■ラジオボタンや文字マウスカーソルを重ねると背景色が変化します
※ラジオボタンにマウスを重ねて下さい
◆<span style="background-color:#c0c0c0;cursor:default;"
   onmouseover="this.style.backgroundColor='skyblue'"
   onmouseout=this.style.backgroundColor='#c0c0c0'>
  <input type="radio" name="Rad_23">[R4]背景色
 </span>
※上記では文字上にカーソルを重ねてもカーソルの形が矢印に変わるようにしています

※マウスオンしたとき背景色等が変化する詳細は
 [技m004]表のセルにマウスを重ねると背景色・背景画像やフォントが変わる 、を参照して下さい。

topへ目次へ前へ次へ
【技b005-3】ラジオボタンがクリック(選択)されたらボタンと文字の背景色が変わる

グループ1(ボタン背景のみ)
 [R1]背景色:水色
 [R2]背景色:黄色
 [R3]背景色:赤色
グループ1(ボタンと文字)
  [R4]背景色:水色
  [R5]背景色:黄色
ラジオボタンをクリックして下さい
 グループ1/[R1〜3]選択されたラジオボタンの背景色のみ変更
 グループ2/[R4〜5]選択されたラジオボタンの背景色と文字の背景色を両方変更

■選択したラジオボタンのみ、背景色を変更する

◆手順1【html】ラジオボタンの設置
※タグはname属性を設定した<form>〜</form>に記述します
※ラジオボタンにはname属性を設定します <input type="radio" name="Rad_31"...
※スタイル属性やイベントハンドラonclickは< input〜>に記述します
※onclick="onCheck31('skyblue')"は
  k:色指定(背景色を指定し''で囲みます)
-----次の行から(copy)-----
<form name="FORM3">
<input type="radio" name="Rad_31" style="background-Color:skyblue" checked
  onclick="onCheck31('skyblue')">[R1]背景色:水色</span><br>
<input type="radio" name="Rad_31"
  onclick="onCheck31('yellow')">[R2]背景色:黄色
<input type="radio" name="Rad_31"
  onclick="onCheck31('red')">[R3]背景色:赤色
</form>
-----上の行まで(copy)-----

◆手順2【javascript】選択されたラジオボタンのみの背景色を変更
※背景色を変えるのは   document.formのname属性.element['ラジオボタンのname属性'][エレンメント番号].style.backgroundColor=k;
と記述します。
※エレンメント番号は 0からはじまる整数です

-----次の行から(copy)-----
function onCheck31(k) {
 var n=3; //ラジオボタン数

 for (i=0;i<=n-1;i++) {
  //選択されているラジオボタンの背景色を変更する
  if (document.FORM3.elements[i].checked) {
    document.FORM3.elements[i].style.backgroundColor=k;
  }
  else {
  //選択されていないラジオボタンの背景色を戻す
    document.FORM3.elements[i].style.backgroundColor='';
  }
 }
}
-----上の行まで(copy)-----

■選択したラジオボタンと文字の両方の背景色を変更する

◆手順1【html】ラジオボタンの設置
※タグはname属性を設定した<form>〜</form>に記述します
※ラジオボタンはid属性を設定した<span>〜</span>内に記述します
※ラジオボタンにはname属性を設定します <input type="radio" name="Rad_32"...
※背景色のスタイル属性は<span>〜</span>に、イベントハンドラonclickは<input〜>に記述します
※onclick="onCheck32((f,j,k)"は
  f:ラジオボタンの識別(ここでは this を記述します)
  j:背景色を変える<span〜>のid属性
  k:色指定(背景色を指定し''で囲みます)

-----次の行から(copy)-----
<form name="FORM3">
<span id="SP_1" style="background-Color:skyblue">
<input type="radio" name="Rad_32" checked
  onclick="onCheck32(this,SP_1,'skyblue')">[R4]背景色:水色</span>
<span id="SP_2">
<input type="radio" name="Rad_32"
  onclick="onCheck32(this,SP_2,'yellow')">[R5]背景色:黄色</span>
</form>
-----上の行まで(copy)-----

◆手順2【javascript】選択されたラジオボタンと文字の両方の背景色を変更

-----次の行から(copy)-----
function onCheck32(f,j,k) {
 //すべてのラジオボタンの背景色を元に戻します(個別に指定します)
 SP_1.style.backgroundColor="";
 SP_2.style.backgroundColor="";

 //チェックボックスがチェックされていたなら
 if (f.checked) {
  j.style.backgroundColor=k; //指定した<span>〜の背景書を変更
 }
}
-----上の行まで(copy)-----

topへ目次へ前へ次へ
【技b005-4】文字をクリックしてもラジオボタンが選択される

文字もクリック可能
  [R1]ラジオボタン
  [R2]ラジオボタン
文字をクリックしてもラジオボタンが選択されます
※通常のリンク文字と異なるため、カーソルの形を矢印(default)に変更し、かつ、リンク文字の下線を消しています
※文字にカーソルを重ねると文字が「太字/赤字」に変わるのは、外部スタイルシートでリンク文字のスタイル設定をしているためで、スタイル設定していなければ変わりません

◆手順【html】ラジオボタンの設置
※タグはname属性を設定した<form>〜※</form>に記述します
※ラジオボタンにはname属性を設定します <input type="radio" name="Rad_4"...
※ラジオボタンの文字をリンク文字に設定します <a href="javascript://"onclick="..."...
※イベントハンドラonclickには
  formのname属性.element['ラジオボタンのname属性'][エレンメント番号].checked=true;
と記述し、ラジオボタンを選択します
※エレンメント番号は 0からはじまる整数で順番に指定します

※リンク文字のスタイル属性を設定しています
  cursor:default;  カーソルの形を矢印に変更
  text-decoration:none;  リンク文字の下線を消す

-----次の行から(copy)-----
<form name="FORM4">
<input type="radio" name="Rad_4" checked>
 <a href="javascript://"
  onclick="FORM4.elements['Rad_4'][0].checked=true;"
  style="cursor:default;text-decoration:none;">[R1]ラジオボタン</a>
<input type="radio" name="Rad_4">
 <a href="javascript://"
  onclick="FORM4.elements['Rad_4'][1].checked=true;"
  style="cursor:default;text-decoration:none;">[R2]ラジオボタン</a>
</form>
-----上の行まで(copy)-----

topへ目次へ前へ次へ
【技b005-5-1】ラジオボタンをクリックするとセルの背景色が変わる
【技b005-5-2】リンク文字を選択するとラジオボタンを選択したり使用可能/不可を切り替える

[R1]背景色:白色
[R2]背景色:黄色
[R3]背景色:水色
[R4]背景色:なし
【技b005-5-1】左のラジオボタンを選択するとセルの背景色が変わります
※ラジオボタンを選択したときにスクリプトを実行する実例です

【技b005-5-2】下記のリンク文字を選択して下さい
※リンク文字を選択したときにラジオボタンを選択したり、ラジオボタンの使用可能/不可を切り替える実例です
 [R1]を選択する
 [R2]を選択する
 [R3]を選択する
 [R4]を使用可能にする
 [R4]を使用不可にする

■【技b005-5-1】ラジオボタンをクリックするとセルの背景色が変わる

◆手順【html】ラジオボタンとイベントハンドラの設置
※ラジオボタンを設置し、各ボタンに onclick="" を記述します
※ラジオボタンをクリックすると、即、スクリプトが実行されます
※背景色を変えるセルのid属性は id="C_5" とします

-----次の行から(copy)-----
<form name="FORM5">
<input type="radio" name="Rad_5" onclick="C_5.style.background='#ffffff'">[R1]背景色:白色
<input type="radio" name="Rad_5" onclick="C_5.style.background='#ffff80'">[R2]背景色:黄色
<input type="radio" name="Rad_5" onclick="C_5.style.background='#80ffff'">[R3]背景色:水色
<input type="radio" name="Rad_5" checked onclick="C_5.style.background=''">[R4]背景色:なし
</form>
-----上の行まで(copy)-----

■【技b005-5-2】リンク文字を選択するとラジオボタンを選択したり使用可能/不可を切り替える

◆手順【html】リンク文字へのイベントハンドラの記述
※リンク文字に onclick="" を記述します
※[R1]〜[R3]ではonclickでラジオボタンをチェックしセルの背景色を変更しています
※[R4]のふたつのリンク文字ではonclickでラジオボタンの使用可能/不可を設定しています

-----次の行から(copy)-----
 <a href="javascript://" onclick="FORM5.elements['Rad_5'][0].checked=true;C_5.style.background='#ffffff';">[R1]を選択する</a>
 <a href="javascript://" onclick="FORM5.elements['Rad_5'][1].checked=true;C_5.style.background='#ffff80';">[R2]を選択する</a>
 <a href="javascript://" onclick="FORM5.elements['Rad_5'][2].checked=true;C_5.style.background='#80ffff';">[R3]を選択する</a>
 <a href="javascript://" onclick="FORM5.elements['Rad_5'][3].disabled=false;">[R4]を使用可能にする</a>
 <a href="javascript://" onclick="FORM5.elements['Rad_5'][3].disabled=true;">[R4]を使用不可にする</a>
-----上の行まで(copy)-----

topへ目次へ前へ次へ
【技b005-6-1】どのボタンが選択されているか判定する
【技b005-6-2】選択されたラジオボタンによって実行するスクリプトを変える

セルの背景色を変える
[R1]背景色:白色
[R2]背景色:黄色
[R3]背景色:水色
[R4]背景色:なし
【技b005-6-1】どのラジオボタンが選択選択されたか調べます
  選択されているラジオボタンを表示

【技b005-6-2】リンク文字をクリックするとスクリプトを実行します
  セルの背景色が変わります

■【技b005-6-1】どのラジオボタンが選択選択されたか調べます

◆手順1【html】ラジオボタンの設置
※ラジオボタンをクリックしてもスクリプトは実行されません

-----次の行から(copy)-----
<form name="FORM6">
<input type="radio" name="Rad_6" checked>[R1]背景色:白色
<input type="radio" name="Rad_6">[R2]背景色:黄色
<input type="radio" name="Rad_6">[R3]背景色:水色
<input type="radio" name="Rad_6">[R4]背景色:なし
</form>
}
-----上の行まで(copy)-----

◆手順2【リンク文字の設置】
-----次の行から(copy)-----
<a href="javascript://" onclick="SelectedRadioB()">選択されているラジオボタンを表示</a>
-----上の行まで(copy)-----

◆手順3【スクリプト】
※ラジオボタン数が4ケなのでfor(i=0;i<=3;i++)と指定します
※チェックされたエレメント番号を取得し、アラート表示します
※チェックボックス番号は i+1 となります

-----次の行から(copy)-----
function SelectedRadioB() {
 var n=0;

 for (i=0;i<=3;i++) {
  if (document.FORM6.elements[i].checked) {
   n=i+1;
   break;
  }
 }

 alert("ラジオボタン[R" + n + "]が選択されています。");
}
-----上の行まで(copy)-----

■【技b005-6-2】選択されたラジオボタンによって実行するスクリプトを変える

◆手順1【ラジオボタンの設置】
※【技b005-6-1】と共通

◆手順2【リンク文字の設置】
-----次の行から(copy)-----
<a href="javascript://" onclick="SelectedRadioB2()">セルの背景色が変わります</a>
; -----上の行まで(copy)-----

◆手順3【スクリプト】
※ラジオボタン数が4ケなのでfor(i=0;i<=3;i++)と指定します
※チェックされたエレメント番号を取得し、アラート表示します
※チェックボックス番号は i+1 となります
※背景色を変えるセルのid属性は id="C_6" とします

-----次の行から(copy)-----
function SelectedRadioB2() {
 var n=0;

 for (i=0;i<=3;i++)
{   if (document.FORM6.elements[i].checked) {
   n=i+1;
   break;
  }
 }

 switch (n){
  case 1:
   C_6.style.background='#ffffff';
   break;
  case 2:
   C_6.style.background='#ffff80';
   break;
  case 3:
   C_6.style.background='#80ffff';
   break;
  case 4:
   C_6.style.background='';
   break;
 }
}
-----上の行まで(copy)-----

topへ目次へ前へ

解説等

◆ある程度、javascriptに習熟してくると、ラジオボタンを用いて選択的にスクリプトを実行したくなります(^^)。そんなとき、参考になれば幸いです。

【類似技】
◆チェックボックスを用いるには
 [技b003]チェックボックスを用いる(基本技)
を参照して下さい。

keyword

◇input◇type◇radio◇

history

◇(2004.12.04)基本技として内容を大幅に拡充
◇(2004.09.23)設置

注意

◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----

access count