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

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

ただいまの
回答率

90.34%

  • JavaScript

    17529questions

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

  • HTML5

    4300questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

ラジオボタンにチェックを入れたらフォームを表示

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 665

NewYork

score 28

ラジオボタンがあり、チェックを入れると
フォームを表示させるようにしたいです。

JS初心者です。
下記のように はい にチェックが入るとJSが はい のidをgetElementByIDで受け取って
はいの場合ラジオボタンの下にフォームを出したいのですが、やり方が全くわかりません。
私自身、ずっとPHPを触ってきたのでJSに着手するのは初めてなので
どうして良いのか...
これから作ろうとしているフォームは、 日頃本を読んでいるかに対し、はいを選んだ際に どのような本を読んでいるかをUSERに入力してもらうというものです。いいえを選んだ際は、こちらのフォームは表示されません。


◉はい
◯いいえ

//はいの時フォームがでる
ーーーーーーーーーーーーーーーー
|                                         |
ーーーーーーーーーーーーーーーー


function showForm(){
    var yes = document.getElementById("yes");
    if (yes){

    }
}
<!DOCTYPE html>
<html>
<head>
    <title>JS練習</title>
    <script type="text/javascript" src="study.js"></script>
</head>
<body>
    <form action="./" method="post">
        <input type=radio name="ans" value="1" id="yes">はい<br>
        <input type=radio name="ans" value="0">いいえ<br>
        <input type="submit" value="次へ">
     </form>
</body>
</html>


ここまでしかできてません。
HTMLとJSは別ファイルにしたいです。
JSないにHTMLを書いて表示させれば一番簡単なのでしょうが
JSの変数内にHTMLを書いても上手くできずに...
簡単で良いので、方法を教えてくださると助かります。
お願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/06/22 13:04

    要件の理解に必要な背景部分となりますので、質問に追記いただけますか?あるかないかでそこまで大きく変わるものではないですが、「その先に何があるか」によって概念が違ってきます

    キャンセル

  • NewYork

    2018/06/22 13:04

    おっしゃる通りでしたね。ありがとうございます。

    キャンセル

  • mts10806

    2018/06/22 13:54

    回答しました、が解決してた・・・。何かの参考にしてみてください。

    キャンセル

回答 3

checkベストアンサー

+1

こんな感じでしょうか?

<form class="form-elm" action="./" method="post">
  <input type=radio name="ans" value="1" id="yes">はい<br>
  <input type=radio name="ans" value="0">いいえ<br>
  <div class="what-book">
    <p>日頃読んでる本はなんですか?</p>
    <textarea name="book" id="" cols="30" rows="10"></textarea>
  </div>
  <input type="submit" value="次へ">
</form>
.what-book {
  display: none;
  border: 1px solid #000;
  padding: 10px;
}

↓ はい のidgetElementByIDで受け取ってはいの場合ラジオボタンの下にフォームを出す場合

window.addEventListener('DOMContentLoaded', function() {

  var formElm = document.querySelector('.what-book');

  [].forEach.call(document.querySelectorAll('input'), function(el) {
    el.addEventListener('change', function(e) {
      console.log(e.target.getAttribute('id'));
      if (e.target.getAttribute('id') === 'yes') {
        formElm.style.display = 'block';
      } else {
        formElm.style.display = 'none';
      }
    }, false);
  });
});

↓ idを使わなくてもvalueで判断することもできます。(getAttributevalueに変えます。)

window.addEventListener('DOMContentLoaded', function() {

  var formElm = document.querySelector('.what-book');

  [].forEach.call(document.querySelectorAll('input'), function(el) {
    el.addEventListener('change', function(e) {
      if (e.target.getAttribute('value') === '1') {
        formElm.style.display = 'block';
      } else {
        formElm.style.display = 'none';
      }
    }, false);
  });
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/06/22 13:36

    こちらコピペでできました!
    しかし、コピペだとまったく理解できたことにならないので、
    一つ一つコードを理解しながら再度、少しずつ変更を加えて実装していきたいと思います!
    ありがとうございました!

    キャンセル

  • 2018/06/22 13:47

    とんでもありません。

    if文の部分を三項演算子で書いた方がスッキリ感が出ますね。

    formElm.style.display = (e.target.getAttribute('id') === 'yes') ? 'block' : 'none';

    ご参考になれば幸いです。

    キャンセル

  • 2018/06/22 15:35

    三項演算子の方が確かに簡潔にかけますね!
    ありがとうございます!

    キャンセル

+1

CSSの場合

textarea {
  display: none;
}

#yes:checked ~ textarea {
  display: inline-block;
}
    <form action="./" method="post">
        <input type="radio" name="ans" value="1" id="yes" /><label for="yes">はい</label><br />
        <input type="radio" name="ans" value="0" id="no" /><label for="no">いいえ</label><br />
        <textarea cols="50" rows="10" name="detail"></textarea><br />
        <input type="submit" value="次へ" />
    </form>


https://developer.mozilla.org/ja/docs/Web/CSS/:checked

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

質問とは直接関係ないのですが、1つ前提。
JavaScript記述及びJavaScriptファイルはなるべく</body>の前にしてください。

要件にもまだ含まれていない部分があると思います。
 初期時点では「次へ」を押せない 
「はい」を選んだ場合はフォーム(テキスト?)を入力しないと「次へ」を押せない
「はい」を選んだ後に「いいえ」を押すとフォームが非表示になる(入力内容もクリア)
とか。

ということで、私が上記妄想を加えた上でのHTMLは下記。

<input type=radio name="ans" value="1">はい<br />
<p style="display:none;" id="book_area"><input type="text" name="book" id="book"></p>
<input type=radio name="ans" value="0">いいえ<br />
<input type="submit" id="submit" value="次へ" disabled>

yesからidを抜いていますが、それは「ラジオボタンが変更されたときのイベント」を
1つのイベントでとるためです。
「現在選択されているラジオボタン」が「選択時」のイベントで判定できるので、それでやります。

※あと細かいですが改行タグもちょっとかえてます。

あとは、ラジオボタンの値のとり方・フォーム情報が変更されたときのイベントのとり方・要素の表示非表示・要素の活性非活性
を組み合わせてJavaScript側を書きます。

※下記はあくま実装例です。ではありませんし、jQuery使うともう少し短く書けないこともないです。

//それぞれ変数に入れておく
var radios = document.getElementsByName("ans");
var submit_btn = document.getElementById("submit");
var book_area = document.getElementById("book_area");
var book = document.getElementById("book");

//ラジオボタンにchangeイベントを付与
radios.forEach((e) => {
    e.addEventListener("change",function(){
      showForm(this);
    },false);
 });
//ラジオボタンchange時に呼び出す
function showForm (ele) {
    //デフォルトはsubmitボタン非活性で入力部分も非表示
    submit_btn.disabled = true;
    book_area.style = "display:none;";
    //yes選択時に表示
    if(ele.value == "1"){
        book_area.style = "display:block;";
    //no選択時にボタン活性化(入力内容空に)
    }else{
        submit_btn.disabled = false;
        book.value = "";
    }
}
//入力時のイベント(keyup)
book.addEventListener("keyup",function(){
    if(this.value != ""){
        submit_btn.disabled = false;
    }else{
        submit_btn.disabled = true;
    }
},false);

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/06/22 14:09

    ありがとうございます!
    こちらの方が、JS初心者の私にとても理解しやすいです。
    試してみます!

    キャンセル

  • 2018/06/22 14:12

    かなり手続き的な書き方をしているので読みやすいとは思います。
    ただ、お仕事としてやるならもっとモダンで簡潔なやり方を組み込んでいかないと、ですね。

    キャンセル

  • 2018/06/22 15:28

    そうですね...
    おっしゃる通りです。試行錯誤しながら頑張って実装してみます!
    ありがとうございます!

    キャンセル

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

  • JavaScript

    17529questions

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

  • HTML5

    4300questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。