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

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

ただいまの
回答率

90.04%

input要素のvalueの取得方法について(clickイベントを使用すると、inputのチェックが外れてしまい、値がNaN になってしまいます)

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,391

C.Darrenport

score 11

前提・実現したいこと

独学でHTML,CSS,jQueryを学習している者です。
下記項目でつまずいております。初めての質問で文章が長くなっており大変申し訳ありませんが、
ご教授願います。

HTML5,CSS3,jQueryを使用し、ローカルで完結する(サーバー系言語をしようしない)アンケートを作成中です。
デザインとして、毎質問のみ表示させており、ボタンをクリックすると次の質問に移動する設定にしております。
各質問にinput要素のラジオボタンを使用し、各valueに"1","0"等の数字を持たせて、
最後に全質問の結果の合計値を表示させようとしています。

【問題点】
jQueryのval()を用い、各質問でチェックされたinput要素のvalueを取得する際に、
click(下記right buttonをクリック)イベントで次の質問に移動すると、前の質問のチェックが消えてしまいます。
そのため、各質問のvalueの値(数字)を取得できないのですが、どのように対応したらよろしいでしょうか?
ご教授願います。
※ソースコードはアンケート項目が多く長いため、該当の部分のみ抜粋して下記に示しております。

発生している問題・エラーメッセージ

/**** console.log(Q1_result+":"+Q2_result+":"+Q3_result+":"+Q4_result);
で各質問の回答(value)を取得するのですが、次の質問に行くごとに前の質問の結果のチェックが
外れてしまい、値を取得できません(NaN になってしまいます)   **********/
1:NaN:NaN:NaN
NaN:0:NaN:NaN
NaN:NaN:0:NaN
NaN:NaN:NaN:0

該当のソースコード

<!------------ question page ------------------>
  <div class="Q_home_page">

    <!---------------  right_button 下記ボタンをクリックします ------------------>
    <div class="right_button push"><button><i class="fa fa-chevron-right" aria-hidden="true"></i></button></div>

    <!-----------------  question erea  各質問の入れ物で、
上記ボタンをクリックすることで、マージンを変更し、1問ずつ表示させるようにしております。
※CSS省略-------------------->
    <div class="question_view">
      <div class="question_box">

        <!-------------------  each question 各質問です ------------------->
        <!-------------  Q1  ------------------->
        <div class="each_question Q1">
          <h3>question 1</h3>
          <h3>If you go to bar with boyfrend,which do you drink?</h3>
          <div class="check_box">
            <label>
              <img src="img/img_Ideal_girlfriend_questionnaire/example/sushi_small.jpg">
              <input type="radio" name="question" value="0">
              <span>Beer</span>
            </label>
            <label>
              <img src="img/img_Ideal_girlfriend_questionnaire/example/hamburger_small.jpg">
              <input type="radio" name="question" value="0">
              <span>Other alcohol</span>
            </label>
            <label>
              <img src="img/img_Ideal_girlfriend_questionnaire/example/pasta_small.jpg">
              <input type="radio" name="question" value="1">
              <span>soft drink</span>
            </label>
          </div>
        </div>
        <!-------------  /Q1  ------------------->
        <!-------------  Q2  ------------------->
        <div class="each_question Q2">
          <h3>question 2</h3>
          <h3>Do you want to feed animals?</h3>
          <div class="check_box">
            <label>
              <img src="img/img_Ideal_girlfriend_questionnaire/example/sushi_small.jpg">
              <input type="radio" name="question" value="0">
              <span>Yes</span>
            </label>
            <label>
              <img src="img/img_Ideal_girlfriend_questionnaire/example/hamburger_small.jpg">
              <input type="radio" name="question" value="1">
              <span>No</span>
            </label>
            <label>
              <img src="img/img_Ideal_girlfriend_questionnaire/example/pasta_small.jpg">
              <input type="radio" name="question" value="0">
              <span>Neither Agree Nor Disagree</span>
            </label>
          </div>
        </div>
        <!-------------  /Q2  ------------------->
        <!-------------  Q3  ------------------->
        <div class="each_question Q3">
          <h3>question 3</h3>
          <h3>When drive date,which do you want to ride cars?</h3>
          <div class="check_box">
            <label>
              <img src="img/img_Ideal_girlfriend_questionnaire/example/sushi_small.jpg">
              <input type="radio" name="question" value="1">
              <span>Sports car</span>
            </label>
            <label>
              <img src="img/img_Ideal_girlfriend_questionnaire/example/hamburger_small.jpg">
              <input type="radio" name="question" value="0">
              <span>SUV</span>
            </label>
            <label>
              <img src="img/img_Ideal_girlfriend_questionnaire/example/pasta_small.jpg">
              <input type="radio" name="question" value="0">
              <span>Small car</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
$(function(){

///// クリックイベント (マージンを変更し、かつ下記で質問の回答を取得しております)///////////
$("div.right_button").click(function(){

      ////// ecch question calculate クリックされた際に下記変数を用い、値を取得しております///////////////
      var Q1_result = parseInt($(".Q1 input[name='question']:checked").val());
      var Q2_result = parseInt($(".Q2 input[name='question']:checked").val());
      var Q3_result = parseInt($(".Q3 input[name='question']:checked").val());
      var Q4_result = parseInt($(".Q4 input[name='question']:checked").val());
      var Q5_result = parseInt($(".Q5 input[name='question']:checked").val());
      var Q6_result = parseInt($(".Q6 input[name='question']:checked").val());
      var Q7_result = parseInt($(".Q7 input[name='question']:checked").val());
      var Q8_result = parseInt($(".Q8 input[name='question']:checked").val());
      var Q9_result = parseInt($(".Q9 input[name='question']:checked").val());
      var Q10_result = parseInt($(".Q10 input[name='question']:checked").val());
      var resultALL = Q1_result + Q2_result + Q3_result +Q4_result + Q5_result + Q6_result + Q7_result + Q8_result + Q9_result + Q10_result;

  /////////// console.log で取得結果を確認しますと、上記で示させて頂きましたエラーメッセージになります ///////////////////
      console.log(Q1_result+":"+Q2_result+":"+Q3_result+":"+Q4_result);



});

試したこと

各変数(var Q1_resultなど)をクリック前に持っていく等しましたが、その場合ですと、イベントで値の取得が出来ず、常にNaNとなってしまいました。
each等もjQueryで試してみましたが、勉強不足か対応できませんでした。

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

より詳細な情報

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+3

nameを"question1"とか問題毎にしてください。

<input type="radio" name="question1" value="0">

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/08/13 18:46

    kei344さん
     回答ありがとうございます。
     非常に助かりました。
     各questionのかたまり(div)でclassを変えていたので、問題ないと思っておりました。
    inputのnameの付け方の勉強になりました

    キャンセル

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

  • ただいまの回答率 90.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • JavaScriptに関する質問
  • input要素のvalueの取得方法について(clickイベントを使用すると、inputのチェックが外れてしまい、値がNaN になってしまいます)