check boxes, filtering jquery

javascript:

 data=[
            {"number": "4", "shot": "3P", "result": "success",},
            {"number": "5", "shot": "2P", "result": "failure",},
            {"number": "6", "shot": "2P", "result": "success",},
            {"number":"7", "shot":"3P", "result":"failure",
            {"number": "8", "shot": "3P", "result": "success",},
            {"number": "4", "shot": "2P", "result": "failure",},
            {"number":"5", "shot":"3P", "result":"failure",
            {"number": "6", "shot": "2P", "result": "success",},
            {"number": "7", "shot": "2P", "result": "failure",},
            {"number": "8", "shot": "3P", "result": "success"}
        ];

html:

<form>
<p>Players<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>Chute>br>
<input type="checkbox" name="q2" value="2P">2P
<input type="checkbox" name="q2" value="3P">3P
</p>

<p>Results<br>
<input type="checkbox" name="q3" value="success">success
<input type="checkbox" name="q3" value="failure">failure
</p>

<p><input type="submit" value="search">/p>
</form>

I would like to create a program that takes only the information of "4" from the array of objects in the variable named data."If you select ""4"" in the check box, ""3P", ""Success", ""2P", and ""Fail"" will be displayed as alerts or something.""Also, I would like to check ""4"" and ""3P"" to display ""Success""."I wish I could filter using .filter() of jquery.Also, I would appreciate it if you could teach me a very simple program.I would appreciate it if you could teach me

jquery html5

2022-09-30 21:19

1 Answers

As you can see in the comments, Array.prototype.filter makes it easy to implement.

I have created a snippet below, so please check it out if you like.
It's so hard to see...

$(function(){

  // Array for data *Sorted for ease of viewing
  var data = [
    {"number": "4", "shot": "2", "result": "failure",},
    {"number": "4", "shot": "3", "result": "success",},
    {"number": "5", "shot": "2", "result": "failure",},
    {"number":"5", "shot":"3", "result":"failure",
    {"number": "6", "shot": "2", "result": "failure",},
    {"number": "6", "shot": "2", "result": "success",},
    {"number": "7", "shot": "2", "result": "failure",},
    {"number":"7", "shot":"3", "result":"failure",
    {"number":"8", "shot":"3", "result":"failure",
    {"number":"8", "shot":"3", "result": "success",},
  ];

  $("form").submit(function(e){
    e.preventDefault();

    var q1 = [ ]; // Array for storing player selection states
    var q2 = [ ]; // chute `
    var q3 = [ ]; // Result `

    // Get player selection status
    $("[name=q1]:checked").each(function(){
      q1.push($(this).val());
    });

    // Get score selection status
    $("[name=q2]:checked").each(function(){
      q2.push($(this).val());
    });

    // Get result selection status
    $("[name=q3]:checked").each(function(){
      q3.push($(this).val());
    });

    // search
    varfilteredData=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 reset
    $("form")[0].reset();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>Players<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>Chute>br>
  <input type="checkbox" name="q2" value="2">2P
  <input type="checkbox" name="q2" value="3">3P
  </p>

  <p>Results<br>
  <input type="checkbox" name="q3" value="success">success
  <input type="checkbox" name="q3" value="failure">failure
  </p>

  <p><input type="submit" value="search">/p>
</form>

2022-09-30 21:19

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656