次のHTMLのように、大分類、小分類のような構成のチェックボックス
グループがあります(初期設定は全部チェック無しです)
普段は[a][b][c][d]をdisableとしておき、(1) にチェックが入った
場合に[d]以外([a][b][c])アクティブ(?とにかくチェックを入れる
ことができる)ようにするにはどうしたらいいでしょうか。
よろしくお願い致します。
<form id="Form1">
:
<INPUT TYPE="CHECKBOX" NAME="food" value="果物">(1) 果物
<INPUT TYPE="CHECKBOX" NAME="food" value="野菜">(2) 野菜
<INPUT TYPE="CHECKBOX" NAME="food" value="肉魚">(3) 肉魚
<br>
<INPUT TYPE="CHECKBOX" NAME="fruit" value="りんご">[a] りんご
<INPUT TYPE="CHECKBOX" NAME="fruit" value="みかん">[b] みかん
<INPUT TYPE="CHECKBOX" NAME="fruit" value="ぶどう">[c] ぶどう
<INPUT TYPE="CHECKBOX" NAME="fruit" value="バナナ">[d] バナナ
:
</form>
No.2ベストアンサー
- 回答日時:
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Test</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function check()
{
var v = document.kkk.food[0].checked;
for(var i=0; i<3; i++){
if(v) {
document.kkk.fruit[i].disabled = false
} else {
document.kkk.fruit[i].disabled= true;
}
}
document.kkk.fruit[3].disabled= true;
}
function oncheck()
{
for(var i=0; i<4; i++){
document.kkk.fruit[i].checked= false;
document.kkk.fruit[i].disabled= true;
}
for(var i=0; i<3; i++){
document.kkk.food[i].checked= false;
}
}
//-->
</SCRIPT>
</head>
<body onload="oncheck()">
<hr><p>
<CENTER>タイムアウト発生</CENTER>
<p>
<form id="Form1" name = "kkk">
<INPUT TYPE="CHECKBOX" NAME="food" value="果物" onclick="check();">(1) 果物
<INPUT TYPE="CHECKBOX" NAME="food" value="野菜">(2) 野菜
<INPUT TYPE="CHECKBOX" NAME="food" value="肉魚">(3) 肉魚
<br>
<INPUT TYPE="CHECKBOX" NAME="fruit" value="りんご">[a] りんご
<INPUT TYPE="CHECKBOX" NAME="fruit" value="みかん">[b] みかん
<INPUT TYPE="CHECKBOX" NAME="fruit" value="ぶどう">[c] ぶどう
<INPUT TYPE="CHECKBOX" NAME="fruit" value="バナナ">[d] バナナ
</form></p>
<hr>
<p></p>
</body>
</html>
jchさん、ご教示ありがとうございました。
早速動作確認させていただいたところ、
まさに要望どおり完璧な動作です!
スクリプトも整然としていて
わたしでもよくわかりました。
本当に勉強になりました。
No.1
- 回答日時:
javascriptにて、果物、野菜、魚肉のリストを作り、disabledを変更しています。
注意ですが、リストを作る際に、取得したエレメントが1つしかなかった場合、リストのlenghtはundifinedになってしまいます。
これを避けるために、リストを生成し、disabledを変更するときに、場合わけとして、
1.if (FruitLists && FruitList.length)
リストに要素があり、かつlengthが取得できる(リストが2以上)
2.else if (FruitLists)
1ではないが、リストに要素がある(要素数が1)
を行っています。
以下ソースです。
<HTML>
<head>
<script language="javascript">
function checkFood(kind, FoodForm) {
FruitLists = document.forms("Form1").elements("fruit");
VegetableLists = document.forms("Form1").elements("vegetable");
MeatLists = document.forms("Form1").elements("meat");
switch (kind) {
case "fruit":
if (FoodForm.checked == true) {
//フルーツをチェック可能に
if (FruitLists && FruitLists.length) {
for (i = 0; i < FruitLists.length; i++) {
FruitLists[i].disabled = false;
}
} else if (FruitLists) {
FruitLists.disabled = false;
} else {
}
} else {
//フルーツをチェック不可能に
if (FruitLists && FruitLists.length) {
for (i = 0; i < FruitLists.length; i++) {
FruitLists[i].disabled = true;
}
} else if (FruitLists) {
FruitLists.disabled = true;
} else {
}
}
break;
case "vegetable":
if (FoodForm.checked == true) {
//野菜をチェック可能に
if (VegetableLists && VegetableLists.length > 1) {
for (i = 0; i < VegetableLists.length; i++) {
VegetableLists[i].disabled = false;
}
} else if (VegetableLists) {
VegetableLists.disabled = false;
} else {
}
} else {
//野菜をチェック不可能に
if (VegetableLists && VegetableLists.length > 1) {
for (i = 0; i < VegetableLists.length; i++) {
VegetableLists[i].disabled = true;
}
} else if (VegetableLists) {
VegetableLists.disabled = true;
} else {
}
}
break;
case "meat":
if (FoodForm.checked == true) {
//魚肉をチェック可能に
if (MeatLists && MeatLists.length) {
for (i = 0; i < MeatLists.length; i++) {
MeatLists[i].disabled = false;
}
} else if (MeatLists) {
MeatLists.disabled = false;
} else {
}
} else {
//魚肉をチェック不可能に
if (MeatLists && MeatLists.length) {
for (i = 0; i < MeatLists.length; i++) {
MeatLists[i].disabled = true;
}
} else if (MeatLists) {
MeatLists.disabled = true;
} else {
}
}
break;
default:
}
}
</script>
</head>
<body>
<form id="Form1">
:
<INPUT TYPE="CHECKBOX" NAME="food" value="果物" onClick="checkFood('fruit', this)">(1) 果物
<INPUT TYPE="CHECKBOX" NAME="food" value="野菜" onClick="checkFood('vegetable', this)">(2) 野菜
<INPUT TYPE="CHECKBOX" NAME="food" value="肉魚" onClick="checkFood('meat', this)">(3) 肉魚
<br>
<INPUT TYPE="CHECKBOX" NAME="fruit" value="りんご" disabled>[a] りんご
<INPUT TYPE="CHECKBOX" NAME="fruit" value="みかん" disabled>[b] みかん
<INPUT TYPE="CHECKBOX" NAME="vegetable" value="キャベツ" disabled>[c] キャベツ
<INPUT TYPE="CHECKBOX" NAME="meat" value="牛肉" disabled>[d] 牛肉
<INPUT TYPE="CHECKBOX" NAME="meat" value="魚" disabled>[e] 魚
:
</form>
</body>
</HTML>
EURさん、別のスレでもお世話になりました。
こちらも大変汎用性が高いです。
野菜、肉魚にも適用できるという
要望以上のものをご提示いただけたおかげで
今作っているページをもっとよくばりに
作っちゃいそうです(^^;
本当にありがとうございました。
#すみません、本来20pt入力させていただきたい
ところですが、別レスでの20ptに免じて
今回は別の回答者様への20として
ご容赦いただけますと幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
return trueとreturn falseの用...
-
フォームの入力チェックをする...
-
slickのレスポンシブ > center...
-
チェックに応じて違うチェック...
-
2次元配列で2項目についてソー...
-
未入力のラジオボタンに、alert...
-
ラジオボタンのNullチェック
-
正規表現で複数マッチ条件で悩...
-
JavaScript ログアウト処理
-
スタイルシートでの「右クリッ...
-
COBOLの数字チェック
-
チェックボックスの有無判定
-
フォームの入力チェックについて
-
onchangeイベントを強制的に発...
-
プルダウン 項目が多いので先頭...
-
JavaScriptにて動的に配列を作...
-
特定<table>内の<td>の色を変える
-
クリックさせたいが、click()が...
-
ハイパーリンクを別ウインドウ...
-
name属性のないformタグの、中...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
return trueとreturn falseの用...
-
slickのレスポンシブ > center...
-
COBOLの数字チェック
-
コピペを禁止するtextarea
-
JavaScriptde途中で、「exit」...
-
未入力のラジオボタンに、alert...
-
ラジオボタンのNullチェック
-
テキストボックスに数字しか入...
-
数式から不要なカッコを取り除...
-
半角英数字のみの入力にエラー...
-
フォームの入力チェックをする...
-
変数の値によってsubmit後の動...
-
ツリービューのチェックボック...
-
ドロップダウンリストボックス...
-
ドラッグ&ドロップ禁止について
-
テキストボックスをEnterキーで...
-
入力された日付の正規表現の仕...
-
Visual Studioのデザインでの非...
-
正規表現で複数マッチ条件で悩...
-
度胸試しのJavaScript
おすすめ情報