checkbox に 2つのvalue を持たせるようなことができたら..

###前提・実現したいこと
チェックしたチェックボックスに、value として設定してある値を数値に変換して計算させるということをやってみました。苦労しました... > https://jsbin.com/galape/edit?html,output

結果は、
「合計は、***円となります」と出るのですが、
結果を見てみて、できれば、
「選択された商品は、android と iphone ですね。」
のような文言が、この流れの中で、出せないだろうかと考えました。

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

value に設定した値同士の計算はできるが、項目名を取得することができない。

###該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html>
3<body> 
4    <form id="phone">
5        <input type="checkbox" name="mobile" value = "500">android
6        <input type="checkbox" name="mobile" value = "800">iphone
7    </form>
8
9    <button id="btn1">total</button>
10
11    <p id="demo"></p>
12    <p id="demo2"></p>
13    <p id="demo3"></p>
14  
15<script>
16            document.getElementById('btn1').onclick = function(){
17               var mobiles = document.getElementsByName('mobile');
18               var selected = [];              
19                   for (var i = 0; i < mobiles.length; i++) {
20                          if (mobiles[i].checked) {
21                              selected.push(parseInt(mobiles[i].value));
22                }
23            }            
24            document.getElementById('demo').innerHTML = selected;
25            selected.unshift(0);  // 後から、reduce を使ったとき、何も選ばなかった場合に、一番左の値が残ってしまうので付け加えてみたら、うまくいった。
26            document.getElementById('demo2').innerHTML = selected; 
27
28            var total = selected.reduce(function(p, c) {return p + c;});
29//reduce に関しては、https://teratail.com/questions/332 を参照して知った。
30            document.getElementById('demo3').innerHTML = "合計は" + total + "円となります。"  ;
31        }
32
33</script>
34</body>
35</html>

###試したこと
チェックしたチェックボックスに、
value として設定してある値を数値に変換して計算させるということをやってみました。
苦労しました...

https://jsbin.com/galape/edit?html,output

label に id をふったらできそうな気もしなくもないなとも思うのですが、checkbox を name 属性で、グループ化して配列に入れた苦労が台無しになるような気がして気乗りがしません。

checkbox の属性に、value1="android" value2="500" のように入れて取り出せたらいいのになと考えましたが、それは無理なようです。

この流れの中でついでに、そういうことができる方法があれば教えていただけないだろうかと思い、投稿させていただきました。

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

行動規範の内容に同意します

回答3件

カスタム属性を使えば可能ではありますね。
http://dresscording.com/blog/html5/custom_data_attribute.html

html
1<input type="checkbox" name="mobile" data-name="android" value = "500">android
2<input type="checkbox" name="mobile" data-name="iphone" value = "800">iphone

javascript
1var selected = [];              
2for (var i = 0; i < mobiles.length; i++) {
3　　　　if (mobiles[i].checked) {
4       　　　　selected.push(parseInt(mobiles[i].value));
5	　　　 console.log(mobiles[i].getAttribute('data-name'));
6         }

投稿2016/10/26 15:46

編集2016/10/26 15:57

hiim

総合スコア1689

margutta

2016/10/27 02:50

教えていただいたページを拝見した時、ああ、必要になってくる要素は後から出てくることがあるんだな、探していたのはこれ！と思いました。深夜にもかかわらず、すぐに回答を書いてくださってありがとうございました。さて、属性の設定をしたら次はどうしたらいいんだろうと思っていたら、.getAttribute('data-name')というところも教えていただきありがとうございました。お世話になりました。

行動規範の内容に同意します

label 要素

label要素を使う方法が良いと思います。

ラベル文を参照する - JSFiddle

HTML
1<form id="phone">
2  <label><input type="checkbox" name="mobile" value = "500">Android</label>
3  <label><input type="checkbox" name="mobile" value = "800">iPhone</label>
4  <input type="submit" value="total">
5</form>
6<pre id="output"></pre>
7
8<script>
9'use strict';
10(function () {
11  function handleSubmit (event) {
12    var inputs = event.target.elements['mobile'],
13        price = 0,
14        names = [];
15
16    for (var i = 0, l = inputs.length, input; i < l; ++i) {
17      input = inputs[i];
18      if (input.checked) {
19        price += Number(input.value);
20        names.push(input.labels[0].textContent);
21      }
22    }
23
24    event.preventDefault();
25    input.ownerDocument.getElementById('output').textContent = [
26      '選択された商品は' + (names.length ? names : 'ない') + 'ですね。',
27      '合計は' + price + '円になります。'
28    ].join('\n');
29  }
30
31  function main () {
32    this.document.getElementById('phone').addEventListener('submit', handleSubmit, false);
33  }
34
35  main.call(this);
36}.call(this));
37</script>

代替案

「checkbox に 2つのvalue を持たせる」という要件だけ考えると次の方法も考えられます。

data-* 属性
value属性値にCSV形式で格納する (ex: 500,Android)
value属性値にJSON形式(配列)で格納する (ex: [500,"Android"])

実質的にはラベル文と同じ文字列を格納する事になるので、label要素をお勧めしています。

Re: margutta さん

投稿2016/10/26 15:51

編集2016/10/26 16:29

think49

総合スコア18162

margutta

2016/10/27 02:50

書いていただいたお手本を読ませていただいて、ごちゃごちゃしていなくて、綺麗、こんな風にもかけるんだと思いました。今のところ、 ○　event.target.elements['mobile']　 ○　event.preventDefault(); ○　input.ownerDocument. (names.length ? names : 'ない')のような省略記法（知識としてはＯＫ） ○ (function () { main.call(this); }.call(this)); のような、書き方が、まだ、自分の頭の中にパーツとしてinput されておらず、今迄読んだ本や見てきたサイトの中には、あまり出てこなかったような気がします。今後、今の知識をベースにして、こういうことが頭に入ってくるようにするのに、適切な指南書やサイトをご存知でしたら、教えていただけるとありがたいです。丁寧な回答を作成していただきありがとうございました。こんな風に書けるようになれたらいいなと思いました。

行動規範の内容に同意します

ベストアンサー

HTML
1<form id="phone">
2  <!-- ラベルとなるテキストをlabel要素で括ってしまえば、idとfor属性は不要 -->
3  <label><input type="checkbox" name="mobile" value="500">android</label>
4  <label><input type="checkbox" name="mobile" value="800">iphone</label>
5  <label><input type="checkbox" name="mobile" value="1200">windows phone</label>
6</form>
7
8<button id="btn1">total</button>
9
10<p id="demo"></p>
11<p id="demo2"></p>
12<p id="demo3"></p>
13
14<script>
15  //イベントを扱うときはaddEventListenerを使いましょう。
16  document.getElementById('btn1').addEventListener('click', function() {
17    var mobiles = document.getElementsByName('mobile');
18
19    var selected = [];  //こちらは機種を格納するために使う
20    var total = 0;      //宣言を前に移動
21    //なお、2つまとめて1つのオブジェクトにするのも良いと思います。
22
23    for (var i = 0; i < mobiles.length; i++) {
24      if (mobiles[i].checked) {
25        selected.push(mobiles[i].parentNode.textContent);  //機種
26        total += parseInt(mobiles[i].value);               //この時点で合計金額に加算する
27      }
28    }
29
30    if(selected.length > 0) {  //何か1つでも選択されている状態。totalで判断することも可
31      document.getElementById('demo3').innerHTML =
32        "合計は" + total + "円となります。<br>" +           //totalはそのまま金額として使える
33        "選択されたのは" + selected.join("と") + "です。";  //配列の要素を"と"で接続して文字列化
34    } else {
35      document.getElementById('demo3').innerHTML = "何も選択されませんでした。"
36    }
37  }, false);
38</script>

投稿2016/10/26 16:10

sii_side

総合スコア849

margutta

2016/10/27 02:52

考えた流れにそった、回答を作成していただき、ありがとうございました。たいへん勉強になりました。乗り越えられなかったところの解決方法を示していただくことによって、知らなかった知識が、特別なありがたみをもって、身近なものとなりました。 ○　チェックボックスに　label をふったから、labal はチェックボックスの親要素になる。 ○　選択されたチェックボックスの親要素からテキストを取り出すのに、.parentNode.textContent　とするというのは、すごいアイデアだと思いました。 ○.parentNode の具体的な使用例を見たのが初めてでした。 ○ また、textContent の使いどころもよくわかりました。 ○また、addEventListener と.onclick についても、 JQuery(まだ、あまり勉強していない）のメソッドチェーンのようにつなげて書けるなら、ありがたいけれど、どうせ何行も書くんなら、onclick でいいや、と思いつつ、なんとなく、気になっていました。今回指摘していただいて、もう一度調べ直して、 https://www.ipentec.com/document/document.aspx?page=javascript-addeventlistener-and-event よくわかりました。

行動規範の内容に同意します

あなたの回答