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

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

ただいまの
回答率

89.12%

getElementsByClassNameを使って、チェックボックスの表示非表示を行う

解決済

回答 6

投稿 編集

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

nyowaa

score 13

いつもお世話になってます。

前提・実現したいこと

ラジオボタンやチェックボックスを選択したときにテキストボックスを表示したいと考えています。
下記のようなidで表示非表示を行う方法は理解しているのですが、

function showRadio( disp ) {
    document.getElementsById('radio').style.display = disp;
}
function showCheck( disp ) {
    document.getElementsById('check').style.display = disp;
}


↓inputの部分を繰り返しで表示しているのでidを使うことができません。

<form action ="send.php" method="post" id="form" class="form"><div class="bgc">
<h1 align="center">テスト</h1>
<div class="question" align="center">
<p>Q1.くえすちょん</p>
<p align="left" style="display:inline-block;">
<input type='radio' name='question1' value='ラジオ1' onclick='showRadio('none');'>
ラジオ1<br>
<input type='radio' name='question1' value='ラジオ2' onclick='showRadio('none');'>
ラジオ2<br>
<input type='radio' name='question1' value='ラジオ3' onclick='showRadio('none');'>
ラジオ3<br>
<input type='hidden' name='question_id' value='6'>
</p>
</div>
<div class="question" align="center">
<p>Q2.くえすちょん</p><p align="left" style="display:inline-block;">
<input type='radio' name='question3' value='ラジオ1' onclick='showRadio('none');'>
ラジオ1<br><input type='radio' name='question3' value='らじお2' onclick='showRadio('none');'>
らじお2<br><input type='radio' name='question3' value='sonota' onclick='showRadio('block');'>
その他<br><input type='text' name='question3' value='' class='radio'>
<input type='hidden' name='question_id' value='6'>
<div class="question" align="center">
<p>くえすちょん</p>
<p align="left" style="display:inline-block;">
<input type='checkbox' name='question8[]' value='チェック1' onclick='showCheck('none');'>
チェック1<br><input type='checkbox' name='question8[]' value='チェック2' onclick='showCheck('none');'>
チェック2<br><input type='checkbox' name='question8[]' value='チェック3' onclick='showCheck('none');'>
チェック3<br><input type='checkbox' name='question8' value='sonota' onclick='showCheck('block');'>
その他<br><input type='text' name='question8' value='' class='check'><input type='hidden' name='question_id' value='6'>
</p>
</div>
<div class="question" align="center">
<p>くえすちょん</p>
<p align="left" style="display:inline-block;"><input type='checkbox' name='question9[]' value='チェック1' class='checkBtn' onclick='showCheck('none');'>
チェック1<br><input type='checkbox' name='question9[]' value='チェック2' class='checkBtn' onclick='showCheck('none');'>
チェック2<br><input type='checkbox' name='question9[]' value='チェック3' class='checkBtn' onclick='showCheck('none');'>
チェック3<br><input type='checkbox' name='question9' value='sonota' onclick='showCheck('block');'>
</p>
</div>

<input type='hidden' name='question_id' value='1'></p></div><div class="submitBtn" align="right">
<input type="submit" value="送信する" id="send" class="send" name="send" style="width:100px; height:30px;">
</div>
</form>
</div>
</body>


ですのでgetElementsByClassNamesを用いて行おうと思い、下記コードを書いて実行してみようとしたのですが、実行されませんでした。

function showRadio( disp ) {
    document.getElementsByClassName('radio').style.display = disp;
}
function showCheck( disp ) {
    document.getElementsByClassName('check').style.display = disp;
}


idとclassとで書き方が違うのでしょうか?
ご教授の方お願い致します。

試したこと

ダメ元でidを指定して実行してみましたがやはり実行されませんでした。

補足情報(言語/FW/ツール等のバージョンなど)

PHP バージョン5.3.1

追記

('radio')はラジオボタン項目にその他があった場合、その他を選択した際に表示を行いたいです。
('check')はチェックボタン項目にその他があった場合、その他を選択した際に表示を行いたいです。

現在のスクリプトはこの様な感じです。

<script type="text/javascript">
function showRadio(disp){
    var elR, elems = document.getElementsByClassName('radio');
    for(elR=0; elR<elems.length; ++elR){
        if(elems[elR]!= disp){
            elems[elR].style.display = disp;
        }
    }
}

function showCheck(disp){
    var elC, elems = document.getElementsByClassName('check');
    for(elC=0; elC<elems.length; ++elC){
        if(elems[elC]!= disp){
            elems[elC].style.display = disp;
        }
    }
}
</script>

追記2

for($j=1; $j<=10; $j++){
        if($col['format']==$frmtR){
        //ラジオボタン
            if($col['answer'.$j]){
                if($col['required'.$k]){
                    echo"<input required type='radio' name='question{$question_count}' value='".$col['answer'.$j]."' onclick='showRadio('none');'>".$col['answer'.$j].'<br>';
                }else{
                    echo"<input type='radio' name='question{$question_count}' value='".$col['answer'.$j]."' onclick='showRadio('none');'>".$col['answer'.$j].'<br>';
                }

            }
        }elseif($col['format']==$frmtC){
        //チェックボックス
            if($col['answer'.$j]){
                if($col['required'.$k]){
                    echo"<input type='checkbox' name='question{$question_count}[]' value='".$col['answer'.$j]."' class='checkBtn' onclick='showCheck('none');'>".$col['answer'.$j].'<br>';
                }else{
                    echo"<input type='checkbox' name='question{$question_count}[]' value='".$col['answer'.$j]."' onclick='showCheck('none');'>".$col['answer'.$j].'<br>';
                }
            }
        }
    }

    if($col['format']==$frmtT){
    //テキストエリア
        if($col['required'.$k]){
            echo "<input type='text' name='question{$question_count}' value='' required><br>";
        }else{
            echo "<input type='text' name='question{$question_count}' value=''><br>";
        }
    }

    //その他
    if($col['other'.$k]){
        if($col['format']==$frmtR){
            echo "<input type='radio' name='question{$question_count}' value='".$col['other'.$j]."' onclick='showRadio('block');' class='forsonota'>";
            echo "その他<br><input type='text' name='question{$question_count}' value='' class='radio sonota'>";
        }elseif($col['format']==$frmtC){
            echo "<input type='checkbox' name='question{$question_count}' value='".$col['other'.$j]."' onclick='showCheck('block');' class='forsonota'>";
            echo "その他<br><input type='text' name='question{$question_count}' value='' class='check sonota'>";
        }
    }
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 6

+3

radioもcheckもidやクラス名ではないですからね
jQueryではなく普通のjavascriptでやりたいのでしょうか?

ちなみにgetElementsById()はgetElementById()なので注意してください

肝心のテキストボックスがソースに見当たりませんが
チェックしたときにDOMで作成するのでしょうか?
それとも隠していたものを見せるのでしょうか?
隠していたものを見せるならそのソースを提示されたほうがよいです。
また非表示状態であってsubmitしたらデータは送られるので
disabledをどうするか方針も決めたほうがよいでしょう

 sample

なにか相当勘違いがあるようなので、ざっと提示しておきます

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('form').on('submit',function(){
    if($('[name="q[1]"]:checked').length==0){
      alert('Q1.必須');
      return false;
    }
    if($('[type=radio][name="q[3]"]:checked').val()=='sonota' && $('[type=text][name="q[3]"]').val()==''){
      alert('Q3.その他テキスト必須');
      return false;
    }
    if($('[type=checkbox][value="q8_sonota"]').prop('checked') && $('[type=text][name="q[8][]"]').val()==''){
      alert('Q8.その他テキスト必須');
      return false;
    }
    if($('[name="q[9][]"]:checked').length==0){
      alert('Q9.必須');
      return false;
    }
  });
  $('[type=radio][name="q[3]"]').on('change',function(){
    var flg=$('[type=radio][name="q[3]"]:checked').val()=='sonota';
    $('[type=text][name="q[3]"]').toggle(flg).prop('disabled',!flg);
  }).change();
  $('[value="q8_sonota"]').on('change',function(){
    var flg=$(this).prop('checked');
    $('[type=text][name="q[8][]"]').toggle(flg).prop('disabled',!flg);
  }).change();
});

</script>
<form>
<h2>Q1.ラジオボタン必須</h2>
<input type='radio' name='q[1]' value='ラジオ1'>ラジオ1<br>
<input type='radio' name='q[1]' value='ラジオ2'>ラジオ2<br>
<input type='radio' name='q[1]' value='ラジオ3'>ラジオ3<br>
<input type='hidden' name='question_id' value='6'>
<h2>Q3.ラジオボタンその他</h2>
<input type='radio' name='q[3]' value='ラジオ1'>ラジオ1<br>
<input type='radio' name='q[3]' value='らじお2'>らじお2<br>
<input type='radio' name='q[3]' value='sonota'>その他<br>
<input type='text' name='q[3]' value='' disabled>
<input type='hidden' name='question_id' value='6'>
<h2>Q8.チェックボックスその他</h2>
<input type='checkbox' name='q[8][]' value='チェック1'>チェック1<br>
<input type='checkbox' name='q[8][]' value='チェック2'>チェック2<br>
<input type='checkbox' name='q[8][]' value='チェック3'>チェック3<br>
<input type='checkbox' value='q8_sonota'>その他<br>
<input type='text' name='q[8][]' value='' disabled>
<input type='hidden' name='question_id' value='6'>
<h2>Q9.チェックボックス必須</h2>
<input type='checkbox' name='q[9][]' value='チェック1'>チェック1<br>
<input type='checkbox' name='q[9][]' value='チェック2'>チェック2<br>
<input type='checkbox' name='q[9][]' value='チェック3'>チェック3<br>
<input type='hidden' name='question_id' value='1'>
<hr>
<input type="submit" value="送信する">
</form>
<?PHP
print_r(@$_GET["q"]);
?>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/16 12:01

    >PHPでよろしいでしょうか?

    元データの方なのでPHPでお願いします

    キャンセル

  • 2016/12/16 12:09

    追記させていただきました!
    宜しくお願い致します。

    キャンセル

  • 2016/12/16 12:20

    ごめんなさい、うまく伝わらなかった
    配列のデータを提示してくださいという意味です
    $colという命名からするとSQLから持ってきている?
    その場合print_r($col)してもらえば良いので、
    どういうデータ形式でもっているか確認させてほしいです
    (ラジオボタンにしろチェックボックスにしろ複数選択肢を保管しているはずなので)

    またテキストボックスやセレクトボックス、テキストエリアなどは
    自動生成する必要はないということでよろしいですか?

    キャンセル

checkベストアンサー

+2

CSSで。

.sonota {
    display: none;
}
.forsonota:checked ~ .sonota {
    display: block;
}
<div class="question">
    <p>Q2.くえすちょん</p>
    <div>
        <input type='radio' name='question3' value='ラジオ1'>ラジオ1<br>
        <input type='radio' name='question3' value='らじお2'>らじお2<br>
        <input type='radio' name='question3' value='sonota' class='forsonota'>その他<br>
        <input type='text' name='question3' value='' class='radio sonota'>
    </div>
</div>
<div class="question">
    <p>くえすちょん</p>
    <div>
        <input type='checkbox' name='question8[]' value='チェック1'>チェック1<br>
        <input type='checkbox' name='question8[]' value='チェック2'>チェック2<br>
        <input type='checkbox' name='question8[]' value='チェック3'>チェック3<br>
        <input type='checkbox' name='question8[]' value='sonota' class='forsonota'>その他<br>
        <input type='text' name='question8' value='' class='check sonota'>
    </div>
</div>

動くサンプル:https://jsfiddle.net/d6jjLxhm/


align属性は廃止されるのでCSSで書きましょう。

【HTML5 & CSS3 リファレンス - align属性 x (要素の配置指定(廃止))】
http://www.osaka-kyoiku.ac.jp/~joho/html5_ref/align_attr.php

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/16 12:14

    回答ありがとうございます!
    実行してみましたところ、うまく実行されませんでした。
    追記に元のコード(PHP)を書かせていただきました。

    キャンセル

  • 2016/12/16 13:52

    「動くサンプル」が動かなかったということでしょうか。
    onclick の削除や適切な Class の設定が必要なので、HTML/CSSに慣れていないと難しいかもしれません。

    キャンセル

  • 2016/12/16 16:49

    申し訳ありません、こちら側のサーバーが問題でした。
    無事に動作しました!ありがとうございました。

    キャンセル

+2

document.getElementsByClassNameはクラス名を指定してそのクラスを持つ要素を配列として取得する関数です。

提示されているソース内にclass="radio"のオブジェクトは存在しません。おそらくclass="checkBtn"のオブジェクトを取ろうとしているのでしょうか。であれば

document.getElementsByClassName('checkBtn')

とすべきです

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/15 16:51

    貼り付けるコードを間違えておりましたので、訂正させていただきました。

    キャンセル

+2

getElementsByClassName、と複数形になっているように、このメソッドでは複数のエレメントが返ってきます。それぞれの操作を行うには、ループなどで回す必要があります。

var i, elems = document.getElementsByClassName('radio');
for(i = 0; i< elems.length; ++i) {
  //elems[i]について操作を行う
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/16 10:18

    <script type="text/javascript">
    function showRadio(disp){
    var elR, elems = document.getElementsByClassName('radio');
    for(elR=0; elR<elems.length; ++elR){
    if(elems[elR]!= disp){
    elems[elR].style.display = disp;
    }
    }
    }

    function showCheck(disp){
    var elC, elems = document.getElementsByClassName('check');
    for(elC=0; elC<elems.length; ++elC){
    if(elems[elC]!= disp){
    elems[elC].style.display = disp;
    }
    }
    }
    </script>
    このような感じでしょうか?

    キャンセル

  • 2016/12/16 10:26

    そうですね、あとは正しくクラスで要素が取れるかも問題です。

    キャンセル

  • 2016/12/16 10:35

    ありがとうございます。先ほどのコードで実行してみましたところ、コード変更前と変わらずラジオボタンやチェックボックスを選択する前からテキストボックスが表示されておりました。
    ↓こちらはPHPのコードなのですが、これらのinputをチェック時に、テキストボックスを表示したいと考えています。
    //その他
    if($col['other'.$k]){
    if($col['format']==$frmtR){
    echo "<input type='radio' name='question{$question_count}' value='".$col['other'.$k]."' onclick='showRadio('block');'>";
    echo "その他<br><input type='text' name='question{$question_count}' value='' class='radio'>";
    }elseif($col['format']==$frmtC){
    echo "<input type='checkbox' name='question{$question_count}' value='".$col['other'.$k]."' onclick='showCheck('block');'>";
    echo "その他<br><input type='text' name='question{$question_count}' value='' class='check'>";
    }
    }

    他のチェックボックスやラジオボタンは、
    チェックボックスのonclickには onclick='showCheck('none')';
    ラジオボタンのonclickには onclick='showRadio('none')';
    とつけております。

    宜しくお願い致します。

    キャンセル

+2

onclick='showCheck("none");'
noneを囲むのをダブルクォートにしないと動きません

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/15 16:56

    ダブルクォーテーションにしたところ、エラーが起きてしまいました。
    こちらのコードは、もともとPHPで書いております。
    ブラウザからソースを表示して貼らせていただきました。

    キャンセル

  • 2016/12/16 10:57

    最初からclass='radio'とclass="check"にstyleを設定しておけばいいのでは

    キャンセル

  • 2016/12/16 11:03

    ありがとうございます。
    style='display:none;'と設定して実行しましたところ、テキストボックスは隠れたのですが、ラジオボタンやチェックボックスを選択してもテキストボックスが表示されませんでした。

    キャンセル

+2

すでに回答でもありますが、
getElementByIdではElementが返ってきますが、
getElementsByClassNameではNodeListが返ってきます。

そのためgetElementsByClassName では以下のように、
複数のElementに対してそれぞれ処理を行う必要があります。
以下はNodeListArrayforEachを使って処理する場合の例です。

function showRadio( disp ) {
    // classname が radio の element を 複数取得
    var elements = document.getElementsByClassName('radio');

    // foreach により 一つずつ処理
    Array.prototype.forEach.call(elements, function( element ){
        element.style.display = disp;
    });
}

追記
「実行前と変わらずラジオボタンやチェックボックスを選択する前からテキストボックスが表示」されている理由は、CSSで該当する要素のdisplayプロパティをnoneに設定していないためと思われます。
CSSでの設定方法はすでにベストアンサーに選ばれている方の通りです。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/16 09:40

    回答ありがとうございます。記述いただいたソースコードを実行してみましたところ、実行前と変わらずラジオボタンやチェックボックスを選択する前からテキストボックスが表示されておりました。

    キャンセル

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

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