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

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

ただいまの
回答率

88.80%

html チェックボックスのチェックされた合計を表示させる

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 1,725

kokok

score 109

コード

<!DOCTYPE  html>
<HTML>
<HEAD>
<meta charset="utf-8">
<SCRIPT >

function calc_total(){
  kingaku = 0;
  for (i=0; i<document.myform.length-1; i++){
    if (document.myform.elements[i].checked){
      kingaku += eval(document.myform.elements[i].value);
    }
  }
  document.myform.goukei.value = kingaku + "円";
}

</SCRIPT>
</HEAD>
<BODY>
  <form name="myform">
  <table border=1 >
  <tr><td>
  <input type="checkbox" value="500" onClick="calc_total()">
  ラーメン(500円)</td></tr>
  <tr><td>
  <input type="checkbox" value="600" onClick="calc_total()">
  チャーハン(600円)</td></tr>
  <tr><td>
  <input type="checkbox" value="600" onClick="calc_total()">
  酢豚(600円)</td></tr>
  <tr><td>
  <input type="checkbox" value="800" onClick="calc_total()">
  A定食(800円)</td></tr>
  <tr><td>
  <input type="checkbox" value="900" onClick="calc_total()">
  B定食(900円)</td></tr>
  <tr><td>
  合計金額:
  <input type="text" name="goukei">
  </td></tr>
  </table>
  </form>
</BODY>
</HTML>

javascriptの 

function calc_total(){
kingaku = 0;
for (i=0; i<document.myform.length-1; i++){
if (document.myform.elements[i].checked){


i<document.myform.length-1;
このコードのi と比較している length-1 とは myform が配列みたいになっているということでしょうか?

myform.elements[i] のコードの意味も教えてください

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 4

checkベストアンサー

+3

document.myform配列ではなくHTMLElementです。
どちらもlengthで何個あるか数えることができます。

違いを確認するには配列かどうかはArray.isArray(document.myform)
HTMLElementかどうかはdocument.myform instanceof HTMLElement
判定可能なのでこちらで判定すると良いでしょう。

余談ですがevalは使ってはいけません。
JavaScriptでeval関数の使い方とリスクとは【初心者向け】

<form name="myform">
  <table>
    <tr>
      <td>
        <input type="checkbox" value="500" onClick="calc_total()" />
        ラーメン(500円)
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="600" onClick="calc_total()" />
        チャーハン(600円)
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="600" onClick="calc_total()" />
        酢豚(600円)
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="800" onClick="calc_total()" />
        A定食(800円)
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="900" onClick="calc_total()" />
        B定食(900円)
      </td>
    </tr>
    <tr>
      <td>
        合計金額:
        <input type="text" name="goukei" />
      </td>
    </tr>
  </table>
</form>
<script>
console.log(Array.isArray(document.myform));
// => false

console.log(document.myform instanceof HTMLElement);
// => true

// ちなみに配列だと…
const arr = [1, 2];
console.log(Array.isArray(arr));
// => true

console.log(arr instanceof HTMLElement);
// => false

function calc_total() {
  let kingaku = 0;
  for (let i = 0; i < document.myform.length - 1; i++) {
    if (document.myform.elements[i].checked) {
      kingaku += parseInt(document.myform.elements[i].value, 10);
    }
  }
  document.myform.goukei.value = kingaku + "円";
}
</script>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+2

https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/length

lengthがあるからって、配列というわけではないです。その考え方だとstringもlengthがあるので配列だということになってしまいます

https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/elements

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+2

<form name="myform">

<form name="myform">

この書き方をする資料は基本的に古いので、最新の資料を参考にすることをお勧めします。
あえて古い書き方に則るのであれば、document.myform ではなく、document.forms['myform'] と書いて下さい。

  • document.myform はform要素以外のname属性を持つ要素にもマッチし、同じ名前を持つ要素が複数存在した場合にマッチさせる為のコードが変化します。
  • <form name="myform"> における myform という名前はform要素群の中で一意の名前でなければなりませんが、form要素でなければ同じ名前を定義する事は可能です

HTMLFormElement#elements

form要素ノードの elements プロパティが指すオブジェクトは疑似配列であり、length プロパティを持ちます。

<script>
'use strict';
function calc_total () {
  var total = 0;
  var elements = document.forms['myform'].elements; // 疑似配列(HTMLFormControlsCollection)を得る

  for (var i = 0, len = elements.length; i < len; ++i) {  // form関連要素ノード群を繰り返し処理
    var input = elements[i];

    if (input.type === 'checkbox' && input.checked) {   // 対象がcheckboxかつcheckされているなら
      total++;
    }
  }

  elements['goukei'].value = total;
}
</script>
<form name="myform">
  <table border="1">
    <tr>
      <td>
        <input type="checkbox" value="500" onClick="calc_total()">
        ラーメン(500円)</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="600" onClick="calc_total()">
        チャーハン(600円)</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="600" onClick="calc_total()">
        酢豚(600円)</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="800" onClick="calc_total()">
        A定食(800円)</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="900" onClick="calc_total()">
        B定食(900円)</td>
    </tr>
    <tr>
      <td>
        合計金額:
        <input type="text" name="goukei">
      </td>
    </tr>
  </table>
</form>

Re: ryo317 さん

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

i<document.myform.length-1;
このコードのi と比較している length-1 とは myform が配列みたいになっているということでしょう か?

document.myform は html内でname="myform" となっている部分のhtmlタグ要素をオブジェクトとして取得しています。
質問の例だと <form name="myform"> のformタグを、Formオブジェクトとして取得します。
Formオブジェクトのlengthプロパティは、form内にあるコントロールの数を返します。
ここでいうコントロールというのは、inputタグや、selectタグなど、フォームの入力要素の事です。

  1. <input type="checkbox" value="500" onClick="calc_total()">
  2. <input type="checkbox" value="600" onClick="calc_total()">
  3. <input type="checkbox" value="600" onClick="calc_total()">
  4. <input type="checkbox" value="800" onClick="calc_total()">
  5. <input type="checkbox" value="900" onClick="calc_total()">
  6. <input type="text" name="goukei">

要素は全部で6個なので、document.myform.length-1 は6-1で「5」になります。

myform.elements[i] のコードの意味も教えてください

myform.elements はフォームに含まれるコントロールの配列みたいなもの
(正確に言うと配列の様にアクセス可能なオブジェクト)を返します。
これには上記の6個の要素が入っています。

配列のキーは0から始まり、
myform.elements[0] とすると、1つ目の要素が取得出来ます。
質問例だとここのアクセスは変数「i」を使っているので、for文のループとの組み合わせにより
「form内の入力要素を順番に取得する」という処理を実行しています。

回答書くにあたって参考にした資料
https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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