Javascript 如何使用输入checbox过滤json数据，并显示或隐藏符合条件的产品

我有一些数据存储在一个数组中。当我点击复选框时，我想显示符合条件的项目，并隐藏不符合条件的项目

例如，如果我有一个通过

For循环

呈现的产品列表，当我单击android复选框时，我只想显示android手机

以下是我迄今为止的javascript代码：

var data = {
    "products": [{
        "Name": "Apple iPhone6 16GB",
        "OS": "iOS",
        "Camera": "16mp",
        "Price": "$" + 99.99,
        "Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
    }, {
        "Name": "Samsung- Galaxy S6 32GB",
        "OS": "android",
        "Camera": "16mp",
        "Price": "$" + 199.99,
        "Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
    }, {
        "Name": "HTC One M9 32GB",
        "OS": "android",
        "Camera": "16mp",
        "Price": "$" + 199.99,
        "Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
    }, {
        "Name": "Apple iPhone6 Plus 32GB",
        "OS": "iOS",
        "Camera": "16mp",
        "Price": "$" + 399.99,
        "Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
    }, {
        "Name": "Samsung Galaxy Note 5 32GB",
        "OS": "android",
        "Camera": "16mp",
        "Price": "$" + 499.99,
        "Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
    }, {
        "Name": "LG G Flex 2 32GB",
        "OS": "android",
        "Camera": "16mp",
        "Price": "$" + 199.99,
        "Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
    }]
}
for (var i = 0; i < data.products.length; i++) {
    $('#productList').append(
        '<div class="item">' +
            '<h3>' + data.products[i].Name + '</h3>' +
            '<h4>' + data.products[i].OS + '</h4>' +
            '<h5>' + data.products[i].Camera + '</h5>' +
            '<h5>' + data.products[i].Price + '</h5>' +
            '<p>' + data.products[i].Specs
    );
}

var数据={
“产品”：[{
“名称”：“苹果iPhone6 16GB”，
“操作系统”：“操作系统”，
“摄像头”：“16mp”，
“价格”：“$”+99.99，
“规格”："我们的知识来自于我们的智慧，来自于我们的精英。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧我是猫。我坐在床上。前庭和前庭，坐在孕妇床上。”
}, {
“名称”：“三星-银河S6 32GB”，
“操作系统”：“安卓”，
“摄像头”：“16mp”，
“价格”：“$”+199.99，
“规格”：我们的知识来自于我们的智慧，来自于我们的精英。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧我是猫。我坐在床上。前庭和前庭，坐在孕妇床上。”
}, {
“名称”：“HTC One M9 32GB”，
“操作系统”：“安卓”，
“摄像头”：“16mp”，
“价格”：“$”+199.99，
“规格”：我们的知识来自于我们的智慧，来自于我们的精英。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧我是猫。我坐在床上。前庭和前庭，坐在孕妇床上。”
}, {
“名称”：“苹果iPhone6加32GB”，
“操作系统”：“操作系统”，
“摄像头”：“16mp”，
“价格”：“$”+399.99，
“规格”：我们的知识来自于我们的智慧，来自于我们的精英。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧我是猫。我坐在床上。前庭和前庭，坐在孕妇床上。”
}, {
“名称”：“三星Galaxy Note 5 32GB”，
“操作系统”：“安卓”，
“摄像头”：“16mp”，
“价格”：“$”+499.99，
“规格”：我们的知识来自于我们的智慧，来自于我们的精英。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧我是猫。我坐在床上。前庭和前庭，坐在孕妇床上。”
}, {
“名称”：“LG G Flex 2 32GB”，
“操作系统”：“安卓”，
“摄像头”：“16mp”，
“价格”：“$”+199.99，
“规格”：我们的知识来自于我们的智慧，来自于我们的精英。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧。我们的智慧来自于我们的智慧我是猫。我坐在床上。前庭和前庭，坐在孕妇床上。”
}]
}
对于（var i=0；i

下面是HTML代码：

<div id="container">
  <ul id="mainNav">
    <li>
      Device Manufacturer
      <ul>
        <li><input type="checkbox" name= "device" value="Apple"> Apple</li>
        <li><input type="checkbox" name= "device" value="HTC"> HTC</li>
        <li><input type="checkbox" name= "device" value="LG"> LG</li>
        <li><input type="checkbox" name= "device" value="Samsung"> Samsung</li>
      </ul>
    </li>
    <li>
      Operating System
      <ul>
        <li><input type="checkbox" name= "device" value="Android"> Android</li>
        <li><input type="checkbox" name= "device" value="ios"> iOS</li>
      </ul>
    </li>
    <li>
      Camera
      <ul>
        <li><input type="checkbox" name= "device" value="8mp"> 8mp</li>
        <li><input type="checkbox" name= "device" value="16mp"> 16mp</li>
      </ul>
    </li>
    <li>
      Storage
      <ul>
        <li><input type="checkbox" name= "device" value="Apple"> 16GB</li>
        <li><input type="checkbox" name= "device" value="Apple"> 32GB</li>
        <li><input type="checkbox" name= "device" value="Apple"> 64GB</li>
      </ul>
    </li>
  </ul>
  <div id="productList"></div>
</div>

设备制造商

苹果
宏达电
LG
三星



操作系统

安卓
iOS



摄像机

8mp
16mp



存储

16GB
32GB
64GB

这里有一个简单的方法可以做到这一点（可能有更好的解决方案，但这应该是可行的）：

作为功能创建了产品列表的构建。它首先清除产品列表，然后创建所选设备的数组复选框，然后使用该数组作为过滤器构建产品列表，以选择适当的产品：

$.fn.buildProductList = function(){
    $('#productList').html("");
    var devices = [];
    $('input[name="device"]:checked').each(function() {
        devices.push(this.value);
    });
    for(var i =0; i < data.products.length; i++) {
        if($.inArray(data.products[i].Device, devices) > -1)
        {
            $('#productList').append(data.products[i].Name + '' + '<br />' + data.products[i].OS + '' + '<br />' + data.products[i].Camera + '' + '<br />' + data.products[i].Price + '' + '<br />' + data.products[i].Specs + '<br />&nbsp;<br />');
        }
    }
}

您的产品将需要与您正在进行的复选框选择值相匹配的属性。对于演示，我只包括“设备”“财产。您应该能够选择任意数量的设备制造商，并使其仅显示符合这些选择的产品。您可以以相同的方式为其他复选框组构建数组，并在决定是否将产品附加到列表时将其添加到if语句中

---

希望这至少能给你一个好的开始。

当我美化你的代码时，我注意到你缺少

div.item

和

的结束标记
$(":checkbox").change(function() {
    $.fn.buildProductList();
});