ラジオボタンチェック時にテキストフォームを表示するには

Question

完全素人ですが、宜しくお願いいたしますm(_ _)m。

ラジオボタンをチェックした時に、その横にテキストフォームを表示するにはどうしたら良いのでしょうか？

ラジオボタンは3個あり、そのうち2つ目又は3つ目のラジオボタンがチェックされたときだけ、それぞれテキストフォームが表示されるようにしたいです。チェックが入っていないラジオボタンの横のテキストフォームは非表示にしたいです。

ネットで色々調べてソースを書いてみたのですが、動きませんでした。

どこを修正すればよいのかご指導お願いいたします。

jQueryへの書き直しでも構いません。

<input type="radio" name="kakougenba" value="社内" checked="checked" id="syanai" onClick="changeDisplay()">社内
<input type="radio" name="kakougenba" value="外注" id="gaityu" onClick="changeDisplay()">外注
<input type="text" name="kakougenbatxt" class="text-c" id="kgt">
<input type="radio" name="kakougenba" value="社内と外注" id="syanai_gaityu" onClick="changeDisplay()">社内&外注
<input type="text" name="kakougenbatxt2" class="text-c" id="kgt2">

<script type="text/javascript"> function changeDisplay() { if ( document.getElementById('syanai').checked ) { document.getElementById('kgt').style.display = none; document.getElementById('kgt2').style.display = none; } if ( document.getElementById('gaityu').checked ) { document.getElementById('kgt2').style.display = none; } if ( document.getElementById('syanai_gaityu').checked ) { document.getElementById('kgt').style.display = none; } } window.onload = changeDisplay; </script>

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。

[m.ts10806]

>動きませんでした。
実際に起きている現象、エラーなど、具体的にご提示ください（これだけでは起きている問題は伝わりませんので）

[m.ts10806]

回答はしましたが、回答を見る前に質問を編集していただければと。

Answer 1

input[type="text"] {
  visibility: hidden;
}

input:checked + input[type="text"] {
  visibility: visible;
}

Comments

[yambejp]

labelをつかわないならこれで十分かもしれないですね

[tukino-hikari]

ありがとうございます。ＣＳＳだけでできるとは思いもしませんでした！

Answer 2

構造をちょっといじっていいならこんな感じ

<style>
[name=kakougenba] ~ input {display:none}
[name=kakougenba]:checked ~ input {display:inline}
</style>
<span>
<input type="radio" name="kakougenba" value="社内" checked="checked" id="syanai"><label for="syanai">社内</label>
</span>
<span>
<input type="radio" name="kakougenba" value="外注" id="gaityu"><label for="gaityu">外注</label>
<input type="text" name="kakougenbatxt" class="text-c" id="kgt">
</span>
<span>
<input type="radio" name="kakougenba" value="社内と外注" id="syanai_gaityu"><label for="syanai_gaityu">社内&外注</label>
<input type="text" name="kakougenbatxt2" class="text-c" id="kgt2">
</span>

Comments

[tukino-hikari]

ありがとうございます。ＣＳＳだけでできるとは思ってもいませんでした。また勉強になりました！

Answer 3

JavaScriptが動いてないっぽいときはまず初めにブラウザのデベロッパーツールを起動してConsoleを確認しましょう。

赤い通知があればそれは構文エラーがあることを示しています。

エラーがあったら、そのエラーを調査です。

• エラーメッセージの読み方と対処, 検索や質問の原則

「デバッグ」を覚えましょう。

• [Chromeのデベロッパーツールで

JavaScriptをデバッグする方法（2019年版）](https://ics.media/entry/190517/)

きちんとデバッグができるようになるとそれだけで大抵のことは自己解決できるようになります。
もちろん構文ミスだけでなく、ロジックがおかしいとか、そういう混んだところも確認してミスに気づくことができるようになります。

---

エラー内容的には「noneという変数はないよ」ということになります。
JavaScriptをはじめ、ほとんどのプログラミング言語は「クォーテーション"（ダブルクォーテーション）や'（シングルクォーテーション）以外はプログラムで取り扱う変数や定数とみなす」ようにできています。

つまり「変数か文字列か」をきちんと区分けしてあげる必要があります。

style.displayに指定できるのは「文字列」なので、「文字列そのもの」か「文字列を格納した変数」を指定してあげる必要があります。

文字列そのもの

document.getElementById('kgt').style.display = "none";

文字列を格納した変数

const none = "none";

上記いずれかで、これでエラーがなくなります。

ただ今のままだと「初期は全部非表示」というだけで「ラジオボタンは3個あり、そのうち2つ目又は3つ目のラジオボタンがチェックされたときだけ、それぞれテキストフォームが表示されるようにしたい」が実装されていません。

none　→　display に切り替える処理ですね。

ここは既にご自身で書かれたように
「そのうち2つ目又は3つ目のラジオボタンがチェックされたときだけ、それぞれテキストフォームが表示」と文章で仕様を書かれていますので、
きちんとそのタイミングを感知して、表示、非表示の制御をしてください。

Comments

[tukino-hikari]

ありがとうございました。解決いたしました！

[m.ts10806]

デバッグについてはどのような場面でも有用ですので、この機会に覚えて自己解決していってください。

[tukino-hikari]

ありがとうございます。勉強します！