Eu tenho uma lista de inputs com type checkbox, com valores que são carregados a partir de um arquivo JSON. Queria saber como fazer um filtro, de forma que ao clicar em um determinado checkbox, os produtos (que são carregados a partir de um outro arquivo JSON) fossem filtrados, ficando apenas o que tem o tamanho escolhido no checkbox.
Unico framework que estou usando é o Jquery
"produto" : [
{
"dados": {
"nome": "Vestido Listrado",
"imgNome": "vestido-listrado",
"data": "Ter, 25 Abr 2017 05:00:00 GMT"
},
"caracteristicas":{
"tamanho": [1,2,3],
"tipo": 1,
"cores": [1,2,3,4,5,6,7,8,9,10]
},
"pagamento":{
"de": null,
"por": 198,
"qtdParcela": 2
},
"link": "img/produtos/vestido-listrado.jpg"
},
{
"dados":{
"nome": "Chapéu Florido",
"imgNome": "chapéu-florido",
"data": "Sun, 23 Oct 2016 12:00:00 GMT"
},
"caracteristicas":{
"tamanho": [5],
"tipo": 1,
"cores": [6]
},
"pagamento":{
"de": null,
"por": 398,
"qtdParcela": 3
},
"link": "img/produtos/chapeu-florido.jpg"
},
E o HTML do produto gerado pelo JS
<piicture class="produtos-organizados">
<img src="img/produtos/vestido-florido.jpg" alt="vestido-florido">
<figcaption>Vestido Florido</figcaption>
<div>
<p>R$ 198</p>
<p>até 2x de 99.00</p>
</div>
<i class="large material-icons">shopping_cart</i>
</piicture>
E o HTML da lista, somente o form é preenchido pelo JS
<div class="lista-cores">
<div class="espacado">
<button id="btn-cor">Cores</button>
<span class="canto canto-cor">+</span>
<form class="lista-de-cores oculto fadeOut">
<input type="checkbox">Todos<br>
<input type="checkbox">Amarelo<br>
<input type="checkbox">Azul<br>
<input type="checkbox">Branco<br>
<input type="checkbox">Cinza<br>
<input type="checkbox">Laranja<br>
<input type="checkbox">Verde<br>
<input type="checkbox">Vermelho<br>
<input type="checkbox">Preto<br>
<input type="checkbox">Rosa<br>
<input type="checkbox">Vinho<br>
</form>
</div>
</div>
JS para gerar os inputs
function listaDeCores(){
var response = JSON.parse(produto.responseText);
var cor = response.cores;
for (var i = 0; i < cor.length; i++) {
var arrayDeCores = response.cores[i].label;
var listaDeCores = $(".lista-de-cores");
var inputText = arrayDeCores;
var inputP = "<p>" + "</p>";
var idP = response.cores[i].id;
var inputDeCores = "<input type='checkbox'>" + inputText;
var srcIdP = $(inputP).attr("class", idP);
srcIdP.append(inputDeCores);
listaDeCores.append(srcIdP);
}};
Todos
é qual numero?