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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

6959閲覧

チェックボックスのチェックした内容を計算するフォーム

beginner_t

総合スコア716

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2015/02/17 01:29

編集2015/02/17 01:31

htmlのチェックボックスを利用して
チェックボックスをチェックすると
指定した場所にチェックした内容とチェックした値同士を計算した内容を表示させたいと思っております。

いろいろ調べたり自分でソースを書いてはみたのですが
うまくいかず、こちらで質問させて頂きました。

【詳細】
チェックボックスには複数の数字を配列のような形で値を保持させ、5個以上はチェックできないようにし、
チェックしたもの同士を対応する数字で足し算をし、
結果をテーブルなどで表示をさせたいです。

チェックボックスは
<label for="natuyouboushi"><input type="checkbox" name="xxx" id="natuyouboushi" value="0,9,4,5,5,7,1">夏用帽子</label>

<label for="fuyuyouboushi"><input type="checkbox" name="xxx" id="fuyuyouboushi" value="0,1,0,9,5,3,5">冬用帽子</label>
のようなイメージです。
valueの数字の意味は
オシャレ度やあったかさなど
そのアイテムを表す数字になっており、
帽子、インナー、ズボン、アウター といった具合に
アイテムごとに分かれております。
チェックされたアイテムごとのvalueの値を計算し、
各アイテムを1~5まで選択した内容の各項目の合計値をだしたいです。

チェックされたものを表示するjpueryはこちらを参考にさせて頂いております。
$(document).ready(function() {

function updateData() { var arr = []; $(":checked").each(function(o) { arr.push($(this).val()); }); // 1つ以上チェックされている時は、 show の内容を更新する。 if (arr.length > 0) { $("#show").text(arr.join(", ") + " を選択しましたね!!"); } } $("input[type=checkbox]").click(function(e) { updateData(); }); updateData();

});

jqueryでもPHPでもどちらでの良いのですが、
チェックボックスに複数の値を持たせ、計算させる方法をご存知の方よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

value="1,2,3,4,5" は、value.split(",") で配列にできます。

あとはあなたのがんばり次第ですね。

lang

1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5<meta charset="utf-8"> 6<meta http-equiv="X-UA-Compatible" content="IE=edge"> 7<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 8<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 9<style> 10</style> 11<script> 12$(document).ready(function() { 13 14 function stars(n, max) { 15 var arr = []; 16 for (var i=0;i < n;i++) arr.push("★"); 17 for (var i=0;i < max;i++) arr.push("☆"); 18 19 return arr.join("") + "(" + n + ")"; 20 } 21 22 function updateData() { 23 var arr = []; 24 // fashon の下のチェックボックスだけ収集する 25 $(":checked", $(".fashon")).each(function(o) { 26 // split で配列にする 27 arr.push($(this).val().split(",")); 28 }); 29 30 var sum = []; 31 32 $(arr).each(function(i) { 33 $(this).each(function(x) { 34 if (sum[x] === undefined) sum[x] = 0; 35 sum[x] += parseInt(this, 10); 36 }); 37 }); 38 39 // 集計用テキストに変換 40 var res = []; 41 var titles = "見た目 流行 今年 来年 去年 項目6 項目7".split(" "); 42 $(sum).each(function(i) { 43 res.push(titles[i] + ":" + stars(sum[i], 20)); 44 }); 45 46 $("#result").text(res.join("\n")); 47 } 48 $("input[type=checkbox]").click(function(e) { 49 updateData(); 50 }); 51 52 updateData(); 53}); 54</script> 55</head> 56<body> 57<form> 58<div class="todofuken"> 59 <label for="saitama"><input type="checkbox" name="xxx" id="saitama" value="埼玉県">埼玉県</label> 60 <label for="tokyo"><input type="checkbox" name="xxx" id="tokyo" value="東京都" checked>東京都</label> 61 <label for="kanagawa"><input type="checkbox" name="xxx" id="kanagawa" value="神奈川県">神奈川県</label> 62</div> 63<div class="fashon"> 64<label for="natuyouboushi"><input type="checkbox" name="xxx" id="natuyouboushi" value="0,9,4,5,5,7,1">夏用帽子</label> 65<label for="fuyuyouboushi"><input type="checkbox" name="xxx" id="fuyuyouboushi" value="0,1,0,9,5,3,5">冬用帽子</label> 66 67</div> 68</form> 69 70<div id="show">まだチェックされてません</div> 71<pre id="result"></pre> 72</body> 73</html> 74

投稿2015/02/17 14:25

ipadcaron

総合スコア1693

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

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

ipadcaron

2015/02/17 14:42

埼玉県とかはチェックするとバグるね。 限定的な範囲のチェックボックスの取得方法は書いたからあとは応用してください。
beginner_t

2015/02/17 15:38

しっかり勉強したいと思います。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問