- ベストアンサー
HTMLでチェックボックスで複数の値を処理する方法
- HTML初心者の方向けに、HTMLでチェックボックスで複数の値を処理する方法について説明します。
- 具体的な要件として、チェックボックスをチェックし、計算ボタンを押すと指定した行の列の値を取得し、その値の割り算を行い、合計値を表示させることを考えています。
- データを一つ取り込むことはできるが、複数データを取り込む方法がわからない初心者の方に対して、実際のコードを使って詳しく説明します。
- pikopiko29
- お礼率53% (48/90)
- JavaScript
- 回答数6
- ありがとう数2
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE hrml> <meta charset="utf-8"> <title></title> <style> input[type="number"] { text-align: right;} table tr:first-of-type input[type="checkbox"] { display: none; } </style> <body> <table border="1" id="A"> <template id="B"> <tr> <th><input type="checkbox"> <td><input type="number"> <td><input type="number"> <td><input type="number"> </template> </table> <p><button id="C">計算</button> <p><output id="D"></output> <script> //1.表の値 const E = [ [1,2,3], [4,5,6], [7,8,9] ]; //2.配列を表にする A.append (...E.reduce ((a, b)=> { let c = B.content.cloneNode (true); [...c.querySelectorAll ('input[type="number"]')].forEach ((d, e)=> d.value = b[e]); return [...a, c]; }, [])); //3.計算して答えを導く関数 function calc () { let a = [...A.rows].filter ((b, c)=> !c || b.querySelector ('th>input[type="checkbox"]:checked'));//最初の行と :checkedになっている行を集める let b = a.map (b=> [...b.querySelectorAll ('input[type="number"]')].map (c=> c.valueAsNumber));//表を２次元の配列にする let [c, ...d] = b; //1行目と他の行を分ける d.forEach (e=> e.forEach ((f, g)=> c[g] /= f));//配列変数cに対して除算する let h = c.reduce ((i, j)=> i + j); //変数cの合計を求める D.textContent = h; //結果の表示 } //4.ボタンが押されたら calc関数を呼び出すようにする C.addEventListener ('click', calc, false); </script>
その他の回答 (5)
- dell_OK
- ベストアンサー率13% (766/5722)
一つ取り込むことはできたとのことですが、それはどのようにして取り込んでいますか。また、表はどのように作られていますか。 JavaScriptではおよそすべての要素を取得できると思うので、なぜ一つしか取り込めていないのかが不思議な感じです。 もし表が<table>でできているのなら、チェックが付けられたチェックボックスの行を走査してそれぞれの列を取得することもできます。 他には回答No.4さまの回答に似ていますが、チェックボックスに複数の値を持たせる方法で以下のように書いたりできます。 <input type="checkbox" data-value1="D" data-value2="E" data-value3="3"> これは「dataset」で調べていただければ使い方がわかるかと思います。 まったく違う方法ですが、チェックボックスがチェックされた時に、変数に値を設定するなどでもできそうな気がします。 回答No.1さまの言われるように、途中までにしてもそのコードを提示されたら、ここをこうしたらいい、などのアドバイスがいただけると思います。
- asciiz
- ベストアンサー率70% (6809/9681)
チェックボックスが1つならば、値は1つしか返せません。 これはもう、HTMLのルールです。 それならば、複数項目を入れた値を返すようにして、受け取り側プログラムで分割するような方法を採れば良いでしょう。 例えば、 <input type="checkbox" name="var1" value="D/E/F"> D E F このようにしておけば、このチェックボックスがオンになったとき、 var1="D/E/F" と言う値を受け取ります。 そしてプログラムの方でスラッシュで分割し、DとEとFを取り出して使います。 必ずこうしなければならないわけではありませんが、一例と言うことで。
- AsarKingChang
- ベストアンサー率46% (3467/7474)
質問サイトなので、どこがわからないのか？ ソース上のどこが動かないから、どうしたらいいか？ がよくわからなく、 丸投げになってしまってるので、今の所 回答がない感じですね。
それぞれにidをふって、 計算ボタンのonclickで関数を呼んで、 関数内でどちらの行がチェックされてるか調べて それぞれの計算をする この中でわからないことを補足してください コードを書いて欲しいとのことですが、それでは作業依頼で質問サイトの趣旨に添えないのでご理解ください
- AsarKingChang
- ベストアンサー率46% (3467/7474)
今どこで、ハマっているのか状況がわからなかったのと、 今どんなソースを書いているのかもわからなかったので、 今現在のソースを追加してみてはいかがでしょうか？ あと、割り算だと、DivbyZero問題が面倒ですね。 （０で割り算が出来ないというやつ）
補足
回答ありがとうございます。 ソースはほぼ書けてません。 チェックボックスで複数の数値を取り込む方法が分からなく、止まっています。 また、割り算ですが、実際は少し複雑な計算をさせる予定ですが、とりあえずという形で割り算にしました。 「０で割り算が出来ないというやつ」問題の処理は特に必要ありません。 よろしくお願いします。
お礼
みなさん たくさんのご回答ありがとうございました。 大変勉強になりました。 まだ理解が及んでいませんが、やりたいことができた「babu_baboo」様の回答をベストアンサーにさせて頂きました。 また、皆さんのお力をお借りすることがあると思いますが、またよろしくお願いします。