action & web技 |
|topへ|目次へ|前へ|次へ|
|
【技b005-1】ラジオボタンを用いる(基本)
|
【ラジオボタン??】
ラジオボタンは、表示された複数の選択肢(ラジオボタン)からひとつだけ選択するときに用います。ボタンの形状は○で選択すると○の中に・が表示されます。なお、選択肢を複数選択する場合はチェックボックスを用います。
【ラジオボタンを用いてみる】
ラジオボタンをチェックできますがそれ以外の動作はしません
※同じグループ内で、ひとつのラジオボタンのみ選択できます
※最初にチェックを入れておくこと、最初は使用不可にしておくことができます(グループ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】ラジオボタンを修飾する(スタイル属性)
|
■マウスカーソルの形ちを変更します(style属性)
※ラジオボタンにマウスを重ねて下さい
◆<input type="radio" name="Rad_21" disabled style="cursor:not-allowed;">[R2]使用不可
※マウスカーソルの変更の詳細は
[技m016]マウスカーソルの形を変える、を参照して下さい。
|
|
■ラジオボタンの背景色や枠を飾ります
◆<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]テーブル(表)の枠線の種類や色・幅を指定する、を参照して下さい。
|
|
■ラジオボタンや文字マウスカーソルを重ねると背景色が変化します
※ラジオボタンにマウスを重ねて下さい
◆<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〜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】文字をクリックしてもラジオボタンが選択される
|
文字をクリックしてもラジオボタンが選択されます
※通常のリンク文字と異なるため、カーソルの形を矢印(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】リンク文字を選択するとラジオボタンを選択したり使用可能/不可を切り替える
|
【技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】選択されたラジオボタンによって実行するスクリプトを変える
セルの背景色を変える
|
【技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)-----
|