ラジオボックス・チェックボックス・テキストボックス

質問

いつも拝見して勉強させていただいています。

勉強不足でうまくjavaがかけないので質問させていただきます。

下記のように機能させたいと考えています。
1.ラジオボックス１とラジオボックス２のみが初めは選択可能。
　他のチェックボックス１～６とテキストボックスは選択不可能。

2.ラジオボックス２を選ぶとチェックボックス１～６が選択可能。テキストボックスは記入不可能。

3.チェックボックス６を選ぶとテキストボックスは記入可能。

配置は以下のような感じになっています。

○ラジオボックス１
○ラジオボックス２---

　　　　　　　　　　　　　　□チェックボックス１
　　　　　　　　　　　　　　□チェックボックス２
　　　　　　　　　　　　　　□チェックボックス３
　　　　　　　　　　　　　　□チェックボックス４
　　　　　　　　　　　　　　□チェックボックス５
　　　　　　　　　　　　　　□チェックボックス６-----

　　　　　　　　　　　　　　　　　　　　　　　　　「
　　　　　　　　　　　　　　　　　　　　　　　　　　　 テキストボックス
　 」
下記サイトを参考にしているのですが組み合わせるとうまくできません。
http://phpjavascriptroom.com/?t=js&p=radiocheckbox

初歩的な質問で申し訳ありませんがよろしくおねがいします。

回答No.3

LancerVII · ベストアンサー

こんにちは。

先の回答者の方も言っておりますが、JavaとJavaScriptは別物ですので、質問するときは気をつけたほうが的確な回答が付くと思います。

HTMLがどのような構成になっているかわからないので参考程度に見てください。

(初期状態はHTMLの属性を利用してdisable状態にしています。)
参考までにjQueryで書いた場合の処理もどうぞ。やっていることは同じです。

==== HTML
<form id="form">
<p>
<label><input type="radio" name="p1" value="1" />１</label>
<label><input type="radio" name="p1" value="2" />２</label>
</p>
<p>
<label><input type="checkbox" name="p2" value="1" disabled="disabled" />１</label>
<label><input type="checkbox" name="p2" value="2" disabled="disabled" />２</label>
<label><input type="checkbox" name="p2" value="3" disabled="disabled" />３</label>
<label><input type="checkbox" name="p2" value="4" disabled="disabled" />４</label>
<label><input type="checkbox" name="p2" value="5" disabled="disabled" />５</label>
<label><input type="checkbox" name="p2" value="6" disabled="disabled" />６</label>
</p>
<p>
<input type="text" name="p3" disabled="disabled" />
</p>
</form>

==== JavaScript
window.onload = function() {
// ラジオのグループを取得(name=p1)
var radioObj = document.getElementsByName('p1');
// チェックボックスのグループを取得(name=p2)
var checkObj = document.getElementsByName('p2');
// テキストのグループを取得(name=p3)
var textObj = document.getElementsByName('p3');
// ラジオの数分ループ処理
for ( var i = 0; i < radioObj.length; i ++ ) {
// それぞれのラジオにclickイベントを設定
radioObj[i].onclick = function() {
// クリックされた要素のvalueが'1'
// であるかを引数にしchangeCheck関数を呼ぶ
changeCheck ( this.value === '1' );
};
}
// チェックグループの5番目すなわち6の選択肢に対し
// クリックイベントを追加
checkObj[5].onclick = function() {
// テキストに対してdisabledを設定する
textObj[0].disabled = !this.checked;
// 入力値を初期化
textObj[0].value = '';
}
function changeCheck ( isDisabled ) {
// チェックボックスの数分のループ処理
for ( var j = 0; j < checkObj.length; j ++ ) {
// チェックを外す
checkObj[j].checked = false;
// disabledを引数によって設定
// ラジオの選択が1の場合はdisabledとする
checkObj[j].disabled = isDisabled;
}
// テキストをdisabled
textObj[0].disabled = true;
// 入力値を初期化
textObj[0].value = '';
}
}

==== 参考までにjQueryで書くと(jQueryの場合、書き方は多岐に渡りますので一例です)

$().ready ( function() {
$('input[name="p1"]').click ( function() {
$('input[name="p2"]').attr ( 'disabled', this.value === '1' );
if ( this.value === '1' ) {
$('input[name="p2"]').removeAttr('checked');
$('input[name="p3"]').attr ( 'disabled', true ).val('');
}
});
$('input[name="p2"]:eq(5)').click ( function() {
$('input[type="text"]').attr ( 'disabled', !this.checked ).val('');
});
});

お礼

ご回答ありがとうございます。JavaとJavaScriptを勘違いして書き込んでしまいました。ご指摘ありがとうございます。またHTMLも記述するべきでした。素晴らしい回答ありがとうございました。希望通りの形態です。勉強させていただきます。

回答No.2

G700s

補足ですが、JavaScriptでHTMLオブジェクトを操作する際はnameやidなどのアトリビュートが通常必要になりますので、HTMLのコードくらいは提供したほうが回答はしやすくてよいです。
※アトリビュートはなくてもできますが、あったほうが分かりやすいです。

また、HTMLオブジェクト操作など、多くの処理はJavScriptの標準機能のみで記述するより、jQueryのようなライブラリを使用したほうが圧倒的に楽です。jQueryを使用すると独特の記法になるので、JSに慣れるまえの最初の段階からjQueryを使用することを強くお勧めします。

お礼

ご回答ありがとうございます。記述の仕方へのご指導、またjQueryについてのアドバイスありががとうございます。

回答No.1

G700s

こちらのカテゴリはJavaであり、質問されているのはJavaScriptですね。
両者は名前は似ているものの、全くの別言語です。
正しいカテゴリで質問されることをお勧めします。

お礼

ご回答ありがとうございます。JavaとJavaScriptを勘違いしてしまい大変申し訳ありません。ご指摘ありがとうございました。