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

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

ただいまの
回答率

89.52%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,437

tajix_japan

score 80

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

<script>
function rCheck(chkID) {
    var array = ['r_btnA', 'r_btnB', 'r_btnO', 'r_btnAB'];
    for (kay in array){
        var r_btn = document.getElementById(array[kay]);
        if(chkID == '0'){
            r_btn.setAttribute('disabled', 'disabled');
            r_btn.checked = false;
        } else {
            r_btn.removeAttribute('disabled');
        }
    }

}
window.onload = function(){
    var array = ['in_yesno1', 'in_yesno2'];
    var ynFlag = '1';

    var array2 = ['in_yesno2', 'in_yesno1'];
    var ynFlag2 = '0';

    for (kay in array){
        var r_btn = document.getElementById(array[kay]);
        if(r_btn.checked){
            ynFlag = r_btn.getAttribute('value');
            break;
        }
    }
    rCheck(ynFlag);
};

</script>



        <p>血液はありますか?</p>
        <form action="xxxxxx" method="post" name="frm_yesno">
        <div><input type="radio" id="in_yesno1" name="q[1]" value="1" onclick="rCheck('1')">はい</div>
        <div><input type="radio" id="in_yesno2" name="q[1]" value="0" onclick="rCheck('0')" checked>いいえ</div>
        </form>

    </section>
    <section class="btn_area">
        <p>では何型ですか?</p>
        <form action="xxxxxx" method="post">
        <div><input type="checkbox" name="type_blood" id="r_btnA" value="a">A型</div>
        <div><input type="checkbox" name="type_blood" id="r_btnB" value="b">B型</div>
        <div><input type="checkbox" name="type_blood" id="r_btnO" value="o">O型</div>
        <div><input type="checkbox" name="type_blood" id="r_btnAB" value="ab">AB型</div>
        </form>

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

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

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

<script>
function rCheck(chkID) {
    var array = ['r_btnA', 'r_btnB', 'r_btnO', 'r_btnAB'];
    for (kay in array){
        var r_btn = document.getElementById(array[kay]);
        if(chkID == '0'){
            r_btn.setAttribute('disabled', 'disabled');
            r_btn.checked = false;
        } else {
            r_btn.removeAttribute('disabled');
        }
    }

    var array2 = ['r_btnF', 'r_btnG'];
    for (kay2 in array2){
        var r_btn2 = document.getElementById(array2[kay2]);
        if(chkID2 == '1'){
            r_btn2.setAttribute('disabled', 'disabled');
            r_btn2.checked = false;
        } else {
            r_btn2.removeAttribute('disabled');
        }
    }

}
window.onload = function(){
    var array = ['in_yesno1', 'in_yesno2'];
    var ynFlag = '1';

    var array2 = ['in_yesno2', 'in_yesno1'];
    var ynFlag2 = '0';

    for (kay in array){
        var r_btn = document.getElementById(array[kay]);
        if(r_btn.checked){
            ynFlag = r_btn.getAttribute('value');
            break;
        }

        var r_btn2 = document.getElementById(array[kay]);
        if(r_btn2.checked){
            ynFlag2 = r_btn2.getAttribute('value');
            break;
        }

    }
    rCheck(ynFlag);


};

</script>


        <p>血液はありますか?</p>
        <form action="xxxxxx" method="post" name="frm_yesno">
        <div><input type="radio" id="in_yesno1" name="q[1]" value="1" onclick="rCheck('1')">はい</div>
        <div><input type="radio" id="in_yesno2" name="q[1]" value="0" onclick="rCheck('0')" checked>いいえ</div>
        </form>

    </section>
    <section class="btn_area">
        <p>では何型ですか?</p>
        <form action="xxxxxx" method="post">
        <div><input type="checkbox" name="type_blood" id="r_btnA" value="a">A型</div>
        <div><input type="checkbox" name="type_blood" id="r_btnB" value="b">B型</div>
        <div><input type="checkbox" name="type_blood" id="r_btnO" value="o">O型</div>
        <div><input type="checkbox" name="type_blood" id="r_btnAB" value="ab">AB型</div>
        <div><input type="checkbox" name="type_blood" id="r_btnF" value="f">私は幽霊です</div>
        <div><input type="checkbox" name="type_blood" id="r_btnG" value="g">私はロボットです</div>

        </form>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

if(chkID2 == '1'){

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/13 17:38

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

    キャンセル

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

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る