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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

JavaScript

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

Q&A

解決済

6回答

6125閲覧

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

nyowaa

総合スコア13

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

JavaScript

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

0グッド

0クリップ

投稿2016/12/15 07:28

編集2016/12/16 03:09

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

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

javascript

1 function showRadio( disp ) { 2 document.getElementsById('radio').style.display = disp; 3} 4function showCheck( disp ) { 5 document.getElementsById('check').style.display = disp; 6}

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

html

1<form action ="send.php" method="post" id="form" class="form"><div class="bgc"> 2<h1 align="center">テスト</h1> 3<div class="question" align="center"> 4<p>Q1.くえすちょん</p> 5<p align="left" style="display:inline-block;"> 6<input type='radio' name='question1' value='ラジオ1' onclick='showRadio('none');'> 7ラジオ1<br> 8<input type='radio' name='question1' value='ラジオ2' onclick='showRadio('none');'> 9ラジオ2<br> 10<input type='radio' name='question1' value='ラジオ3' onclick='showRadio('none');'> 11ラジオ3<br> 12<input type='hidden' name='question_id' value='6'> 13</p> 14</div> 15<div class="question" align="center"> 16<p>Q2.くえすちょん</p><p align="left" style="display:inline-block;"> 17<input type='radio' name='question3' value='ラジオ1' onclick='showRadio('none');'> 18ラジオ1<br><input type='radio' name='question3' value='らじお2' onclick='showRadio('none');'> 19らじお2<br><input type='radio' name='question3' value='sonota' onclick='showRadio('block');'> 20その他<br><input type='text' name='question3' value='' class='radio'> 21<input type='hidden' name='question_id' value='6'> 22<div class="question" align="center"> 23<p>くえすちょん</p> 24<p align="left" style="display:inline-block;"> 25<input type='checkbox' name='question8[]' value='チェック1' onclick='showCheck('none');'> 26チェック1<br><input type='checkbox' name='question8[]' value='チェック2' onclick='showCheck('none');'> 27チェック2<br><input type='checkbox' name='question8[]' value='チェック3' onclick='showCheck('none');'> 28チェック3<br><input type='checkbox' name='question8' value='sonota' onclick='showCheck('block');'> 29その他<br><input type='text' name='question8' value='' class='check'><input type='hidden' name='question_id' value='6'> 30</p> 31</div> 32<div class="question" align="center"> 33<p>くえすちょん</p> 34<p align="left" style="display:inline-block;"><input type='checkbox' name='question9[]' value='チェック1' class='checkBtn' onclick='showCheck('none');'> 35チェック1<br><input type='checkbox' name='question9[]' value='チェック2' class='checkBtn' onclick='showCheck('none');'> 36チェック2<br><input type='checkbox' name='question9[]' value='チェック3' class='checkBtn' onclick='showCheck('none');'> 37チェック3<br><input type='checkbox' name='question9' value='sonota' onclick='showCheck('block');'> 38</p> 39</div> 40 41<input type='hidden' name='question_id' value='1'></p></div><div class="submitBtn" align="right"> 42<input type="submit" value="送信する" id="send" class="send" name="send" style="width:100px; height:30px;"> 43</div> 44</form> 45</div> 46</body>

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

javascript

1function showRadio( disp ) { 2 document.getElementsByClassName('radio').style.display = disp; 3} 4function showCheck( disp ) { 5 document.getElementsByClassName('check').style.display = disp; 6}

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

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

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

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

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

javascript

1<script type="text/javascript"> 2function showRadio(disp){ 3 var elR, elems = document.getElementsByClassName('radio'); 4 for(elR=0; elR<elems.length; ++elR){ 5 if(elems[elR]!= disp){ 6 elems[elR].style.display = disp; 7 } 8 } 9} 10 11function showCheck(disp){ 12 var elC, elems = document.getElementsByClassName('check'); 13 for(elC=0; elC<elems.length; ++elC){ 14 if(elems[elC]!= disp){ 15 elems[elC].style.display = disp; 16 } 17 } 18} 19</script>

追記2

PHP

1 for($j=1; $j<=10; $j++){ 2 if($col['format']==$frmtR){ 3 //ラジオボタン 4 if($col['answer'.$j]){ 5 if($col['required'.$k]){ 6 echo"<input required type='radio' name='question{$question_count}' value='".$col['answer'.$j]."' onclick='showRadio('none');'>".$col['answer'.$j].'<br>'; 7 }else{ 8 echo"<input type='radio' name='question{$question_count}' value='".$col['answer'.$j]."' onclick='showRadio('none');'>".$col['answer'.$j].'<br>'; 9 } 10 11 } 12 }elseif($col['format']==$frmtC){ 13 //チェックボックス 14 if($col['answer'.$j]){ 15 if($col['required'.$k]){ 16 echo"<input type='checkbox' name='question{$question_count}[]' value='".$col['answer'.$j]."' class='checkBtn' onclick='showCheck('none');'>".$col['answer'.$j].'<br>'; 17 }else{ 18 echo"<input type='checkbox' name='question{$question_count}[]' value='".$col['answer'.$j]."' onclick='showCheck('none');'>".$col['answer'.$j].'<br>'; 19 } 20 } 21 } 22 } 23 24 if($col['format']==$frmtT){ 25 //テキストエリア 26 if($col['required'.$k]){ 27 echo "<input type='text' name='question{$question_count}' value='' required><br>"; 28 }else{ 29 echo "<input type='text' name='question{$question_count}' value=''><br>"; 30 } 31 } 32 33 //その他 34 if($col['other'.$k]){ 35 if($col['format']==$frmtR){ 36 echo "<input type='radio' name='question{$question_count}' value='".$col['other'.$j]."' onclick='showRadio('block');' class='forsonota'>"; 37 echo "その他<br><input type='text' name='question{$question_count}' value='' class='radio sonota'>"; 38 }elseif($col['format']==$frmtC){ 39 echo "<input type='checkbox' name='question{$question_count}' value='".$col['other'.$j]."' onclick='showCheck('block');' class='forsonota'>"; 40 echo "その他<br><input type='text' name='question{$question_count}' value='' class='check sonota'>"; 41 } 42 }

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

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

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

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

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

guest

回答6

0

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

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

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

sample

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

HTML

1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 $('form').on('submit',function(){ 5 if($('[name="q[1]"]:checked').length==0){ 6 alert('Q1.必須'); 7 return false; 8 } 9 if($('[type=radio][name="q[3]"]:checked').val()=='sonota' && $('[type=text][name="q[3]"]').val()==''){ 10 alert('Q3.その他テキスト必須'); 11 return false; 12 } 13 if($('[type=checkbox][value="q8_sonota"]').prop('checked') && $('[type=text][name="q[8][]"]').val()==''){ 14 alert('Q8.その他テキスト必須'); 15 return false; 16 } 17 if($('[name="q[9][]"]:checked').length==0){ 18 alert('Q9.必須'); 19 return false; 20 } 21 }); 22 $('[type=radio][name="q[3]"]').on('change',function(){ 23 var flg=$('[type=radio][name="q[3]"]:checked').val()=='sonota'; 24 $('[type=text][name="q[3]"]').toggle(flg).prop('disabled',!flg); 25 }).change(); 26 $('[value="q8_sonota"]').on('change',function(){ 27 var flg=$(this).prop('checked'); 28 $('[type=text][name="q[8][]"]').toggle(flg).prop('disabled',!flg); 29 }).change(); 30}); 31 32</script> 33<form> 34<h2>Q1.ラジオボタン必須</h2> 35<input type='radio' name='q[1]' value='ラジオ1'>ラジオ1<br> 36<input type='radio' name='q[1]' value='ラジオ2'>ラジオ2<br> 37<input type='radio' name='q[1]' value='ラジオ3'>ラジオ3<br> 38<input type='hidden' name='question_id' value='6'> 39<h2>Q3.ラジオボタンその他</h2> 40<input type='radio' name='q[3]' value='ラジオ1'>ラジオ1<br> 41<input type='radio' name='q[3]' value='らじお2'>らじお2<br> 42<input type='radio' name='q[3]' value='sonota'>その他<br> 43<input type='text' name='q[3]' value='' disabled> 44<input type='hidden' name='question_id' value='6'> 45<h2>Q8.チェックボックスその他</h2> 46<input type='checkbox' name='q[8][]' value='チェック1'>チェック1<br> 47<input type='checkbox' name='q[8][]' value='チェック2'>チェック2<br> 48<input type='checkbox' name='q[8][]' value='チェック3'>チェック3<br> 49<input type='checkbox' value='q8_sonota'>その他<br> 50<input type='text' name='q[8][]' value='' disabled> 51<input type='hidden' name='question_id' value='6'> 52<h2>Q9.チェックボックス必須</h2> 53<input type='checkbox' name='q[9][]' value='チェック1'>チェック1<br> 54<input type='checkbox' name='q[9][]' value='チェック2'>チェック2<br> 55<input type='checkbox' name='q[9][]' value='チェック3'>チェック3<br> 56<input type='hidden' name='question_id' value='1'> 57<hr> 58<input type="submit" value="送信する"> 59</form> 60<?PHP 61print_r(@$_GET["q"]); 62?>

投稿2016/12/15 07:32

編集2016/12/16 02:32
yambejp

総合スコア114505

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

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

nyowaa

2016/12/15 07:51

申し訳ありません、貼り付けるコードを間違えておりました。 訂正させていただきました。
yambejp

2016/12/15 07:59

結局、ラジオボタンを選んだらどうしたいのかわかりません ラジオボタンを隠せばいいのですか? それともradioというid/name/classのいずれかがついたテキストボックスが他にあって それを表示したり消したりすればいいのでしょうか? チェックボックスについても同様です
nyowaa

2016/12/15 08:09

jQueryでなく普通のjavascriptで行おうと考えておりますが、jQueryでもこのようにできる方法があるのでしょうか?もしありましたらご教授お願いします。
nyowaa

2016/12/16 02:11

いつもお世話になっております。そしてサンプルコードもありがとうございます。 前回同様、その他の項目もサーバーから取得してきております。そのため、その他の項目がない場合もあります。 //その他 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' style='display:none;'>"; }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' style='display:none;'>"; } } (一応、その他部分のPHPコードを記させていただきます。)
yambejp

2016/12/16 02:40

2点だけ ・question番号毎に常にひとつ以上のチェックが必要と考えてよいのでしょうか? (私の例示だと必須の場合と必須でない場合が想定されています) ・私のサンプルで試しに送信チェックしましたか? 受け取り側の処理を考えると、例示のようなnameの付け方をするのが肝要です ついてはPHP側でそのように出力する努力が必要です。 その他の有り無しの判断も含め、チェックボックスやラジオボタンの元になる 配列をその他ありなしの場合それぞれどうやって形式でもっている提示してください
nyowaa

2016/12/16 02:49

> ・question番号毎に常にひとつ以上のチェックが必要と考えてよいのでしょうか? チェックボックス時は、必須の場合だとひとつ以上のチェックが必要と考えていただきましてOKです。 >・私のサンプルで試しに送信チェックしましたか? はい、試させていただきました!ですがその他を選択してもテキストボックスが表示されませんでした。 >その他の有り無しの判断も含め、チェックボックスやラジオボタンの元になる配列をその他ありなしの場合それぞれどうやって形式でもっている提示してください PHPでよろしいでしょうか?HTMLの方がよろしいでしょうか。
yambejp

2016/12/16 03:01

>PHPでよろしいでしょうか? 元データの方なのでPHPでお願いします
nyowaa

2016/12/16 03:09

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

2016/12/16 03:20

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

0

ベストアンサー

CSSで。

CSS

1.sonota { 2 display: none; 3} 4.forsonota:checked ~ .sonota { 5 display: block; 6}

HTML

1<div class="question"> 2 <p>Q2.くえすちょん</p> 3 <div> 4 <input type='radio' name='question3' value='ラジオ1'>ラジオ1<br> 5 <input type='radio' name='question3' value='らじお2'>らじお2<br> 6 <input type='radio' name='question3' value='sonota' class='forsonota'>その他<br> 7 <input type='text' name='question3' value='' class='radio sonota'> 8 </div> 9</div> 10<div class="question"> 11 <p>くえすちょん</p> 12 <div> 13 <input type='checkbox' name='question8[]' value='チェック1'>チェック1<br> 14 <input type='checkbox' name='question8[]' value='チェック2'>チェック2<br> 15 <input type='checkbox' name='question8[]' value='チェック3'>チェック3<br> 16 <input type='checkbox' name='question8[]' value='sonota' class='forsonota'>その他<br> 17 <input type='text' name='question8' value='' class='check sonota'> 18 </div> 19</div> 20```**動くサンプル:**[https://jsfiddle.net/d6jjLxhm/](https://jsfiddle.net/d6jjLxhm/) 21 22--- 23 24align属性は廃止されるのでCSSで書きましょう。 25 26【HTML5 & CSS3 リファレンス - align属性 x (要素の配置指定(廃止))】 27[http://www.osaka-kyoiku.ac.jp/~joho/html5_ref/align_attr.php](http://www.osaka-kyoiku.ac.jp/~joho/html5_ref/align_attr.php)

投稿2016/12/16 02:48

kei344

総合スコア69357

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

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

nyowaa

2016/12/16 03:14

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

2016/12/16 04:52

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

2016/12/16 07:49

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

0

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

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

JavaScript

1function showRadio( disp ) { 2 // classname が radio の element を 複数取得 3 var elements = document.getElementsByClassName('radio'); 4 5 // foreach により 一つずつ処理 6 Array.prototype.forEach.call(elements, function( element ){ 7 element.style.display = disp; 8 }); 9}

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

投稿2016/12/15 10:13

編集2016/12/16 09:26
kra8

総合スコア79

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

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

nyowaa

2016/12/16 00:40

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

0

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

投稿2016/12/15 07:41

date

総合スコア1820

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

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

nyowaa

2016/12/15 07:56

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

2016/12/16 01:57

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

2016/12/16 02:03

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

0

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

javascript

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

投稿2016/12/15 07:38

maisumakun

総合スコア145064

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

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

nyowaa

2016/12/16 00:53

回答ありがとうございます。 ↓このように書いてみて、実行してみたのですが、結果は変わりませんでした。 エラーは起きていないのですが、どこがおかしいのでしょうか? <script type="text/javascript"> function showRadio(disp){ var elR, elems = document.getElementsByClassName('radio'); for(elR=0; elR<elems.length; ++elR){ element.style.display = disp; } } function showCheck(disp){ var elC, elems = document.getElementsByClassName('check'); for(elC=0; elC<elems.length; ++elC){ element.style.display = disp; } } </script> 宜しくお願い致します。
maisumakun

2016/12/16 00:56

上のコードの「element」はどこでも定義されていないように見えるのですが。
nyowaa

2016/12/16 01: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> このような感じでしょうか?
maisumakun

2016/12/16 01:26

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

2016/12/16 01: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')'; とつけております。 宜しくお願い致します。
guest

0

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

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

document.getElementsByClassName('checkBtn')

とすべきです

投稿2016/12/15 07:37

hitsujimeeee

総合スコア486

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

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

nyowaa

2016/12/15 07:51

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問