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

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

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

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

Q&A

解決済

2回答

493閲覧

class直下 radioのvalueをすべて取得したい

imaharu

総合スコア32

JavaScript

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

0グッド

0クリップ

投稿2017/08/16 13:14

やりたいこと

現在、新規登録画面を作成しています

submitが行われた時に,各科目radioボタンのvalue値を計算しようとしたところ

input内のnameを毎回
document.getElementsByName("database");

のように取得すれば、実装は可能なのですが

class="gpa"を基準として

radioのvalueを取得する方法がわからなくて困ってあります

期待する結果は
classを基準として
document.getElementsByName("gpa").length 回
ループしてradio内のvalueの合計を表示することです

よろしくお願いします

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ログイン画面</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript"> function count() { var radios = document.getElementsByName("database"); var result; for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { result = radios[i].value; break; } } //value値を表示する alert("value値は" + result + "です"); } </script> </head> <body> <form method="POST" name="insert" action="insert.php" onsubmit="count()" id="insert_form"> <table id="insert"> <thead> <tr> <th>科目情報</th> <th>成績評価</th> </tr> </thead> <tbody> <tr> <td>データベース</td> <td class="gpa"> <input type="radio" id="zero_database" name="database" value="0"> <label for="zero_database">不可</label> <input type="radio" id="one_database" name="database" value="1"> <label for="one_database">可</label> <input type="radio" id="two_database" name="database" value="2"> <label for="two_database">良</label> <input type="radio" id="three_database" name="database" value="3"> <label for="three_database">優</label> <input type="radio" id="four_database" name="database" value="4"> <label for="four_database">秀</label> <input type="radio" id="none_database" name="database"> <label for="none_database">取得していない</label> <input type="hidden" class="count" value="2"> </td> </tr> <tr> <td>微積分</td> <td class="gpa"> <input type="radio" id="zero_Calculus" name="Calculus" value="0"> <label for="zero_Calculus">不可</label> <input type="radio" id="one_Calculus" name="Calculus" value="1"> <label for="one_Calculus">可</label> <input type="radio" id="two_Calculus" name="Calculus" value="2"> <label for="two_Calculus">良</label> <input type="radio" id="three_Calculus" name="Calculus" value="3"> <label for="three_Calculus">優</label> <input type="radio" id="four_Calculus" name="Calculus" value="4"> <label for="four_Calculus">秀</label> <input type="radio" id="none_Calculus" name="Calculus"> <label for="none_Calculus">取得していない</label> <input type="hidden" class="count" value="1"> </td> </tr> </tbody> </table> <input type="submit" value="送信"> </form> </body> </html>

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

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

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

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

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

guest

回答2

0

HTMLFormElement.elements

見たところ、[name="database"].gpa 直下にしか存在しないので、classで制限するまでもなく、下記コードでいいのではないでしょうか。

JavaScript

1document.getElementById('insert_form').elements['database']

querySelectorAll

class で制限するなら、querySelectorAll を使ってください。

JavaScript

1document.querySelectorAll('.gpa>[name="database"]')

FormData

IE11- 用に Polyfill が必要ですが、FormData を使うと、楽ですね。

HTML

1<form method="POST" name="insert" action="insert.php" onsubmit="count()" id="insert_form"> 2 <table id="insert"> 3 <thead> 4 <tr> 5 <th>科目情報</th> 6 <th>成績評価</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <td>データベース</td> 12 <td class="gpa"> 13 <input type="radio" id="zero_database" name="database" value="0" checked> 14 <label for="zero_database">不可</label> 15 <input type="radio" id="one_database" name="database" value="1"> 16 <label for="one_database">可</label> 17 <input type="radio" id="two_database" name="database" value="2"> 18 <label for="two_database">良</label> 19 <input type="radio" id="three_database" name="database" value="3"> 20 <label for="three_database">優</label> 21 <input type="radio" id="four_database" name="database" value="4"> 22 <label for="four_database">秀</label> 23 <input type="radio" id="none_database" name="database"> 24 <label for="none_database">取得していない</label> 25 26 <input type="hidden" class="count" value="2"> 27 </td> 28 </tr> 29 <tr> 30 <td>微積分</td> 31 <td class="gpa"> 32 <input type="radio" id="zero_Calculus" name="Calculus" value="0" checked> 33 <label for="zero_Calculus">不可</label> 34 <input type="radio" id="one_Calculus" name="Calculus" value="1"> 35 <label for="one_Calculus">可</label> 36 <input type="radio" id="two_Calculus" name="Calculus" value="2"> 37 <label for="two_Calculus">良</label> 38 <input type="radio" id="three_Calculus" name="Calculus" value="3"> 39 <label for="three_Calculus">優</label> 40 <input type="radio" id="four_Calculus" name="Calculus" value="4"> 41 <label for="four_Calculus">秀</label> 42 <input type="radio" id="none_Calculus" name="Calculus"> 43 <label for="none_Calculus">取得していない</label> 44 45 <input type="hidden" class="count" value="1"> 46 </td> 47 </tr> 48 </tbody> 49 </table> 50 <input type="submit" value="送信"> 51</form> 52 53<script> 54'use strict'; 55var formData = new FormData(document.getElementById('insert_form')); 56console.log(formData.get('database')); // "0" 57console.log(formData.get('Calculus')); // "0" 58</script>

Re: imaharu さん

投稿2017/08/16 13:33

編集2017/08/16 14:02
think49

総合スコア18156

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

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

imaharu

2017/08/16 13:43

回答ありがとうございます 質問の仕方が悪かったです 微積分にもclass="gpa"をつけています 自分がやりたいのは、 name="database" name=""Calculus"を イメージとしては gpa[0].radio[3].value - (gpa一番目 radioボタン3番目 > データベース 良) gpa[1].radio[2].value - (gpa二番目 radioボタン2番目 > 微積分 可) みたいな感じでnameのvalueを取得したいです よろしくお願いします
think49

2017/08/16 13:49

> 微積分にもclass="gpa"をつけています そちらは、[name=Calculus] で名前が違うのですから、データベース側に存在する [name=database] とは区別できますよね。 form.elements['database'] と form.elements['Calculus'] で各々処理をさせれば済むのではないでしょうか。
guest

0

ベストアンサー

JavaScript

1document.addEventListener( 'DOMContentLoaded' , e => { 2 document.querySelector( 'form' ).addEventListener( 'submit', check, false ); 3 function check( e ) { 4 let v = 0; 5 e.preventDefault() 6 document.querySelectorAll( '.gpa input[type="radio"]:checked' ).forEach( e => { 7 if ( e.value && e.value > 0 ) v += parseInt( e.value, 10 ); 8 } ); 9 console.log( v ); 10 } 11}, false ); 12```**動くサンプル:**[https://jsfiddle.net/m7dtdq7h/](https://jsfiddle.net/m7dtdq7h/)

投稿2017/08/16 13:37

編集2017/08/16 13:38
kei344

総合スコア69357

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

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

imaharu

2017/08/16 13:47

サンプルまで丁寧に…… サンプルみたら、期待した動きをしていたので、参考にしてコードを直します ありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問