■下記サンプルソースのラジオボタンの「はい」を選択すると複数のラジオボタンがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。
(ページ開いた際は「いいえ checked」で複数ラジオボタンはグレーで選択無効)
用途はアンケートフォームです。
可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。
<form name="form2" method="post" action="">
<table>
<tr>
<td>■「はい」を選択すると、ラジオボタン(カテゴリー1~4)がアクティブになる。
</td>
</tr>
<tr>
<td>
<input name="radiobutton" type="radio" value="radiobutton">はい
<input name="radiobutton" type="radio" value="radiobutton" checked>いいえ
</td>
</tr>
<tr>
<td>
<input name="radiobutton" type="radio" value="radiobutton">カテゴリー1
<input name="radiobutton" type="radio" value="radiobutton">カテゴリー2
<input name="radiobutton" type="radio" value="radiobutton">カテゴリー3
<input name="radiobutton" type="radio" value="radiobutton">カテゴリー4
</td>
</tr>
</table>
</form>
No.3ベストアンサー
- 回答日時:
カテゴリーが違うのに同じ名前を使うと使い勝手が悪いです
#1さんのようにわけてかくといいですね。
こんな感じで、オブジェクトを引数で渡すと比較的
ローレベルのjavascriptで動作します。
<script language="javascript">
function changeRadio(num1,num2){
var f=num1.form
for(var i=0;i<f.length;i++){
if (f.elements[i].name==num2) f.elements[i].disabled=((num1.value=="yes")?false:true)
}
}
</script>
<form name="form2" method="post" action="">
<table>
<tr>
<td>■「はい」を選択すると、ラジオボタン(カテゴリー1~4)がアクティブになる。
</td>
</tr>
<tr>
<td>
<input name="radioSelect" type="radio" value="yes" onclick="changeRadio(this,'radiocategory')">はい
<input name="radioSelect" type="radio" value="no" checked onclick="changeRadio(this,'radiocategory')">いいえ
</td>
</tr>
<tr>
<td>
<input name="radiocategory" type="radio" value="category1" disabled>カテゴリー1
<input name="radiocategory" type="radio" value="category2" disabled>カテゴリー2
<input name="radiocategory" type="radio" value="category3" disabled>カテゴリー3
<input name="radiocategory" type="radio" value="category4" disabled>カテゴリー4
</td>
</tr>
</table>
</form>
No.2
- 回答日時:
kato96さんこんにちは、papillon68と申します。
入力可/不可の切替えはBLUEPIXYさんのサンプルであるように「disabled」を使います。(enabledの操作のイメージ)
ラジオボタンの他にも
「テキスト」、「チェックボックス」、「プルダウン」、「ボタン」などでも行えます。
参考URLで入力可/不可を切り替えるサンプルが掲載されています。
また、参考サイトではその他にも色々なサンプルがあるので役立つかもしれません(@^-^@)
参考URL:http://05xx.sub.jp/javascript/sample/sample06_di …
No.1
- 回答日時:
こんな感じでどうでしょう
----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>Sample</title>
<style>
<!--
h1.title { font: bolder xx-large Arial,sans-serif; }
-->
</style>
<script type="text/javascript">
<!--
function activate(formName){
var f=document.getElementsByName(formName);
for(var i=0;i<f.length;i++){
f[i].disabled=false;
}
}
function disable(formName){
var f=document.getElementsByName(formName);
for(var i=0;i<f.length;i++){
f[i].disabled=true;
}
}
//-->
</script>
</head>
<body>
<form name="form2" method="post" action="">
<table>
<tr>
<td>■「はい」を選択すると、ラジオボタン(カテゴリー1~4)がアクティブになる。
</td>
</tr>
<tr>
<td>
<input name="radioSelect" type="radio" value="yes" onclick="activate('radiocategory')">はい
<input name="radioSelect" type="radio" value="no" checked onclick="disable('radiocategory')">いいえ
</td>
</tr>
<tr>
<td>
<input name="radiocategory" type="radio" value="category1" disabled>カテゴリー1
<input name="radiocategory" type="radio" value="category2" disabled>カテゴリー2
<input name="radiocategory" type="radio" value="category3" disabled>カテゴリー3
<input name="radiocategory" type="radio" value="category4" disabled>カテゴリー4
</td>
</tr>
</table>
</form>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックス付きのテーブ...
-
javascript でリンクを動的に変...
-
入力チェックの外部スクリプト...
-
【緊急】リアルタイムでエラー...
-
googlemap api での 座標の取得
-
文字数を数える際に空白、改行...
-
プルダウン 項目が多いので先頭...
-
dijit.form.ComboBoxについて
-
return trueとreturn falseの用...
-
javascript による POST 送信時...
-
テキストボックスに入力された...
-
プルダウンメニューを表の中に...
-
VBSでブラウザ上のテキストボッ...
-
ラジオボタンの選択で解答・点...
-
追加ボタンを押した際に ok ボ...
-
netscapeでもinnerTextやinnner...
-
tableの任意行にfocusをあてる
-
value内に変数を入れたい
-
submitするとなぜか2度実行する
-
JavaScriptで特定のtdタグにcla...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
チェックボックス付きのテーブ...
-
JavaScriptの「.querySelectorA...
-
formで項目を連結したい
-
Formのシリアライズができない
-
画面表示とともにtableの指定の...
-
文字数を数える際に空白、改行...
-
クリックしたラジオボタンの行...
-
ラジオボタンを一括で操作する...
-
画面の2重起動をチェックする...
-
ラジオボタンとテキストボック...
-
Javascriptの電卓で最初の何も...
-
入力チェックの外部スクリプト...
-
JavaScriptによる自動計算フォーム
-
複数のselect値で1つも選択され...
-
javascriptで表(テーブル)の自...
-
jQueryで合計を出したい
-
localStorageでのcheckbox制御
-
JavaScriptで、コピーボタンを...
-
Javascriptで自動的に計算する...
-
WEBフォーム(asp)から画像デ...
おすすめ情報