質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

7578閲覧

【javascript】ラジオボタンに連動するチェックボックス

tajix_japan

総合スコア132

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/02/13 06:50

下記のようなラジオボタンに連動するチェックボックスがあります。
ラジオボタンは「血液がありますか?」という問いに対する「はい」「いいえ」です。
チェックボックスの中身はA型B型など血液型の選択肢です。
「血液がありますか?」 という問いに対し当初は「いいえ(radio) checked」となっており、この状態では血液型のチェックボックスが選択できません。
これを「はい(radio)」とすると血液型のチェックボックスが選択できるようになります。

javascript

1<script> 2function rCheck(chkID) { 3 var array = ['r_btnA', 'r_btnB', 'r_btnO', 'r_btnAB']; 4 for (kay in array){ 5 var r_btn = document.getElementById(array[kay]); 6 if(chkID == '0'){ 7 r_btn.setAttribute('disabled', 'disabled'); 8 r_btn.checked = false; 9 } else { 10 r_btn.removeAttribute('disabled'); 11 } 12 } 13 14} 15window.onload = function(){ 16 var array = ['in_yesno1', 'in_yesno2']; 17 var ynFlag = '1'; 18 19 var array2 = ['in_yesno2', 'in_yesno1']; 20 var ynFlag2 = '0'; 21 22 for (kay in array){ 23 var r_btn = document.getElementById(array[kay]); 24 if(r_btn.checked){ 25 ynFlag = r_btn.getAttribute('value'); 26 break; 27 } 28 } 29 rCheck(ynFlag); 30}; 31 32</script> 33 34 35 36 <p>血液はありますか?</p> 37 <form action="xxxxxx" method="post" name="frm_yesno"> 38 <div><input type="radio" id="in_yesno1" name="q[1]" value="1" onclick="rCheck('1')">はい</div> 39 <div><input type="radio" id="in_yesno2" name="q[1]" value="0" onclick="rCheck('0')" checked>いいえ</div> 40 </form> 41 42 </section> 43 <section class="btn_area"> 44 <p>では何型ですか?</p> 45 <form action="xxxxxx" method="post"> 46 <div><input type="checkbox" name="type_blood" id="r_btnA" value="a">A</div> 47 <div><input type="checkbox" name="type_blood" id="r_btnB" value="b">B</div> 48 <div><input type="checkbox" name="type_blood" id="r_btnO" value="o">O</div> 49 <div><input type="checkbox" name="type_blood" id="r_btnAB" value="ab">AB</div> 50 </form> 51 52

これを改造して下記のようにしたいと思います。
チェックボックスの選択枝に血液型に加え、「私は幽霊です」「私はロボットです」を付け加えます。

「当初の血液がありますか?→いいえ(radio) checked」の状態では、「血液型(A型B型..)のチェックボックスがdisabled」となっている代わりに「私は幽霊です」「私はロボットです」のチェックボックスが選択できます。
血液がありますか?→「はい(radio)」にラジオボタンを変更すると、「私は幽霊です」「私はロボットです」のチェックボックスがdisabled」となり、血液型(A型B型..)のチェックボックスが選択できるようになります。

【出来なかったこと】
下記のように改造してみましたがうまくいきません。
当初の血液型のdisabledは機能していますが、ラジオボタンを変更したときに、幽霊ロボットのdisabledが機能しません。
どのように改造すればいいかご教示願います。

javascript

1<script> 2function rCheck(chkID) { 3 var array = ['r_btnA', 'r_btnB', 'r_btnO', 'r_btnAB']; 4 for (kay in array){ 5 var r_btn = document.getElementById(array[kay]); 6 if(chkID == '0'){ 7 r_btn.setAttribute('disabled', 'disabled'); 8 r_btn.checked = false; 9 } else { 10 r_btn.removeAttribute('disabled'); 11 } 12 } 13 14 var array2 = ['r_btnF', 'r_btnG']; 15 for (kay2 in array2){ 16 var r_btn2 = document.getElementById(array2[kay2]); 17 if(chkID2 == '1'){ 18 r_btn2.setAttribute('disabled', 'disabled'); 19 r_btn2.checked = false; 20 } else { 21 r_btn2.removeAttribute('disabled'); 22 } 23 } 24 25} 26window.onload = function(){ 27 var array = ['in_yesno1', 'in_yesno2']; 28 var ynFlag = '1'; 29 30 var array2 = ['in_yesno2', 'in_yesno1']; 31 var ynFlag2 = '0'; 32 33 for (kay in array){ 34 var r_btn = document.getElementById(array[kay]); 35 if(r_btn.checked){ 36 ynFlag = r_btn.getAttribute('value'); 37 break; 38 } 39 40 var r_btn2 = document.getElementById(array[kay]); 41 if(r_btn2.checked){ 42 ynFlag2 = r_btn2.getAttribute('value'); 43 break; 44 } 45 46 } 47 rCheck(ynFlag); 48 49 50}; 51 52</script> 53 54 55 <p>血液はありますか?</p> 56 <form action="xxxxxx" method="post" name="frm_yesno"> 57 <div><input type="radio" id="in_yesno1" name="q[1]" value="1" onclick="rCheck('1')">はい</div> 58 <div><input type="radio" id="in_yesno2" name="q[1]" value="0" onclick="rCheck('0')" checked>いいえ</div> 59 </form> 60 61 </section> 62 <section class="btn_area"> 63 <p>では何型ですか?</p> 64 <form action="xxxxxx" method="post"> 65 <div><input type="checkbox" name="type_blood" id="r_btnA" value="a">A</div> 66 <div><input type="checkbox" name="type_blood" id="r_btnB" value="b">B</div> 67 <div><input type="checkbox" name="type_blood" id="r_btnO" value="o">O</div> 68 <div><input type="checkbox" name="type_blood" id="r_btnAB" value="ab">AB</div> 69 <div><input type="checkbox" name="type_blood" id="r_btnF" value="f">私は幽霊です</div> 70 <div><input type="checkbox" name="type_blood" id="r_btnG" value="g">私はロボットです</div> 71 72 </form> 73 74

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ロジックが効率的かどうかは別にして
とりあえず開発ツール起動してやればわかりますよ

if(chkID2 == '1'){

↓↓↓
if(chkID == '1'){

投稿2017/02/13 07:58

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tajix_japan

2017/02/13 08:38

出来ました! 有難うございました!! 心より御礼申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問