チェックボックスを複数選択した場合の判定方法

前提・実現したいこと

お世話になっております。

現在、アンケートサイトを作成しています。
複数選択可能なチェックボックスを作成し、
事前に設定しているキーワードと合致した場合メッセージを表示したいです。

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

一つの項目のみ選択→キーワードと比較し判定は出来ています。
複数選択時の判定方法がわかりません。

該当のソースコード

javascript
1// ひらがな
2var msg = "";
3var kana = input.kana ? input.kana : "";
4if (kana == "あ") {
5    msg = "あです";
6} else if (kana == "い") {
7    msg = "いです";
8} else if (kana == "う") {
9    msg = "うです";
10} else if (kana == "え") {
11    msg = "えです";
12} else if (kana == "お") {
13    msg = "おです";
14}
15

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<body>
5    <form id="kana_form">
6        <table width="640" border="0" cellspacing="1" cellpadding="4">
7            <tr class="table_item">
8                <td><span class="item">ひらがな</span></td>
9                <td><span>
10                    <input type="checkbox" name="kana" id="kana_1" value="あ"><LABEL>あ</LABEL><br>
11                    <input type="checkbox" name="kana" id="kana_2" value="い"><LABEL>い</LABEL><br>
12                    <input type="checkbox" name="kana" id="kana_3" value="う"><LABEL>う</LABEL><br>
13                    <input type="checkbox" name="kana" id="kana_4" value="え"><LABEL>え</LABEL><br>
14                    <input type="checkbox" name="kana" id="kana_5" value="お"><LABEL>お</LABEL><br>
15                </span></td>
16            </tr>
17        </table>
18    </form>
19</body>
20</html>

試したこと

①選択された項目のvalueを配列に入れる
②キーワードを配列にいれる
③配列同士をforで回し、ifで比較
④trueならばmsgにキーワードを入れる

このようにすると、比較はうまくいきました。
しかし、④の部分で、項目ごとに違うメッセージを表示させたいため、
その部分の実装ができませんでした。

補足情報（FW/ツールのバージョンなど）

上記のソースは、例として作成しております。
実際のソースは業務で使用しているため開示できません。
また、実際のソースではチェックボックスは20個あります。

以上、宜しくお願い致します。

yambejp

2018/08/02 01:05

キーワードは１つしかない？完全一致、部分一致？

atmn3356

2018/08/02 01:15

yambejp様　一つの項目に一つしかありません。また、完全一致です。宜しくお願い致します。

yambejp

2018/08/02 01:23

うーん、例示からどういう結果がほしいか想像できません。キーワードが「あ」だったとして、チェックボックスのid=kana_1がチェックされていたら「あです」と表示するだけなら、今のソースでできていますよね？あとは何がやりたいのでしょうか？

atmn3356

2018/08/02 01:30 編集

選択項目が一つの場合は今のソースでできます。実現したいのは、チェックボックスで「あ、い、う」など複数項目が選択されている場合の処理です。現状では「あ==あ」など、一つしか判定されないのです。全部選択されている場合、「あです　いです　うです　えです　おです」と表示されるようにしたいのです。言葉足らずで申し訳ありません。なにとぞ宜しくお願い致します。

yambejp

2018/08/02 01:39

なるほど、ではキーワードは配列なのですね？var keyword=[”あ","い","う"]となっていて、チェックボックス「あ」と「う」がチェックされていたら、msgに「あですうです」とスペース区切りの文字列がはいればよい？

atmn3356

2018/08/02 01:46

現状ソースは一つの判定しかしていないため決め打ちですが、複数判定するには配列にしなければならないかと思っています。＞チェックボックス「あ」と「う」がチェックされていたら～～　そうです！そうなるのが理想です。宜しくお願い致します。

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

回答1件

こんな感じでどうでしょう？

javascript
1<script>
2var keyword=["あ","い","う"];
3window.addEventListener('DOMContentLoaded', function(e){
4  document.querySelector('#btn').addEventListener('click',function(){
5    var msgs=[];
6    [].forEach.call(document.querySelectorAll('[name=kana]:checked'),function(x){
7      if(keyword.indexOf(x.value)>0){
8        msgs.push(x.value+"です");
9      }
10    });
11    console.log(msgs.length>0?msgs.join(" "):"からっぽ");
12  });
13});
14</script>
15
16
17<form id="kana_form">
18<label><input type="checkbox" name="kana" value="あ">あ</label><br>
19<label><input type="checkbox" name="kana" value="い">い</label><br>
20<label><input type="checkbox" name="kana" value="う">う</label><br>
21<label><input type="checkbox" name="kana" value="え">え</label><br>
22<label><input type="checkbox" name="kana" value="お">お</label><br>
23<input type="button" value="check" id="btn">
24</form>