###前提・実現したいこと
チェックしたチェックボックスに、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
結果は、
「合計は、***円となります」と出るのですが、
結果を見てみて、できれば、
「選択された商品は、android と iphone ですね。」
のような文言が、この流れの中で、出せないだろうかと考えました。
label に id をふったらできそうな気もしなくもないなとも思うのですが、checkbox を name 属性で、グループ化して配列に入れた苦労が台無しになるような気がして気乗りがしません。
checkbox の属性に、value1="android" value2="500" のように入れて取り出せたらいいのになと考えましたが、それは無理なようです。
この流れの中でついでに、そういうことができる方法があれば教えていただけないだろうかと思い、投稿させていただきました。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/27 02:50