

javascript:

[code]

    data=[
                {"number":"4","shot":"3P","result":"成功"},
                {"number":"5","shot":"2P","result":"失敗"},
                {"number":"6","shot":"2P","result":"成功"},
                {"number":"7","shot":"3P","result":"失敗"},
                {"number":"8","shot":"3P","result":"成功"},
                {"number":"4","shot":"2P","result":"失敗"},
                {"number":"5","shot":"3P","result":"失敗"},
                {"number":"6","shot":"2P","result":"成功"},
                {"number":"7","shot":"2P","result":"失敗"},
                {"number":"8","shot":"3P","result":"成功"}
            ]; 
    
[/code]

html:

[code]

    <form>
    <p>選手<br>
    <input type="checkbox" name="q1" value="4番"> 4番
    <input type="checkbox" name="q1" value="5番"> 5番
    <input type="checkbox" name="q1" value="6番"> 6番
    <input type="checkbox" name="q1" value="7番"> 7番
    <input type="checkbox" name="q1" value="8番"> 8番
    </p>
    
    <p>シュート<br>
    <input type="checkbox" name="q2" value="2P"> 2P
    <input type="checkbox" name="q2" value="3P"> 3P
    </p>
    
    <p>結果<br>
    <input type="checkbox" name="q3" value="成功"> 成功
    <input type="checkbox" name="q3" value="失敗"> 失敗
    </p>
    
    <p><input type="submit" value="検索"></p>
    </form>
    
[/code]

このdataという名前の変数にいれたオブジェクトの配列から、例えば"4"の情報だけを取ってくるプログラムをつくりたいです。チェックボックスで"4"を選択すると「"3P","成功"」、「"2P","失敗"」をアラートか何かで表示させたいです。さらに"4","3P"をチェックすると「"成功"」を表示させたいです。jqueryの.filter()を使ってフィルタリング出来ればいいなと思っています。またとてもシンプルなプログラムで教えて頂けたら幸いです。どなたかご教授よろしくお願いします。


CC BY-SA 3.0
2016-08-25T09:48:58.930
28484
2016-08-27T08:08:50.497
2016-08-25T09:51:56.357
5044
18545
question
jquery html5
チェックボックス、jqueryのフィルタリング


コメントにありますように、
**[Array.prototype.filter](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)**
を使用すると簡単に実装が可能です。

以下にスニペットを作成してみましたので、よろしければご確認下さい。  
見難くてゴメンナサイ。。。

[code]

    $(function() {
    
      // データ用配列 ※見やすさのためソートしてます
      var data = [
        {"number" : "4" , "shot" : "2" , "result" : "失敗"} ,
        {"number" : "4" , "shot" : "3" , "result" : "成功"} ,
        {"number" : "5" , "shot" : "2" , "result" : "失敗"} ,
        {"number" : "5" , "shot" : "3" , "result" : "失敗"} ,
        {"number" : "6" , "shot" : "2" , "result" : "失敗"} ,
        {"number" : "6" , "shot" : "2" , "result" : "成功"} ,
        {"number" : "7" , "shot" : "2" , "result" : "失敗"} ,
        {"number" : "7" , "shot" : "3" , "result" : "失敗"} ,
        {"number" : "8" , "shot" : "3" , "result" : "失敗"} ,
        {"number" : "8" , "shot" : "3" , "result" : "成功"} ,
      ];
    
      $("form").submit(function(e){
        e.preventDefault();
    
        var q1 = []; // 選手     選択状態格納用配列
        var q2 = []; // シュート        ``
        var q3 = []; // 結果            ``
    
        // 選手の選択状態を取得
        $("[name=q1]:checked").each(function() {
          q1.push($(this).val());
        });
    
        // 点数の選択状態を取得
        $("[name=q2]:checked").each(function() {
          q2.push($(this).val());
        });
    
        // 結果の選択状態を取得
        $("[name=q3]:checked").each(function() {
          q3.push($(this).val());
        });
    
        // 検索
        var filteredData = data.filter(function(element) {
          if (q1.length === 0) return true;
          return (q1.indexOf(element.number) >= 0);
        }).filter(function(element){
          if (q2.length !== 1) return true;
          return (q2.indexOf(element.shot) >= 0);
        }).filter(function(element){
          if (q3.length !== 1) return true;
          return (q3.indexOf(element.result) >= 0);
        });
        alert(JSON.stringify(filteredData));
    
        // フォームリセット
        $("form")[0].reset();
      });
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form>
      <p>選手<br>
      <input type="checkbox" name="q1" value="4"> 4番
      <input type="checkbox" name="q1" value="5"> 5番
      <input type="checkbox" name="q1" value="6"> 6番
      <input type="checkbox" name="q1" value="7"> 7番
      <input type="checkbox" name="q1" value="8"> 8番
      </p>
    
      <p>シュート<br>
      <input type="checkbox" name="q2" value="2"> 2P
      <input type="checkbox" name="q2" value="3"> 3P
      </p>
    
      <p>結果<br>
      <input type="checkbox" name="q3" value="成功"> 成功
      <input type="checkbox" name="q3" value="失敗"> 失敗
      </p>
    
      <p><input type="submit" value="検索"></p>
    </form>
[/code]


CC BY-SA 3.0
2016-08-27T02:56:23.600
28522
2016-08-27T08:08:50.497
2016-08-27T08:08:50.497
12256
12256
28484
answer