Question

我对Javascript很新，我试图根据复选框过滤/更新数据。如果您在下面看到我可以根据我创建的数据（dataset2）中的值过滤数据。数据集3是问题...我想单击复选框并根据检查的值更新数据集。

首先，我不确定如何将值数组传递到过滤器中（例如，我将如何通过＆＃34; Books＆＃34;＆amp;＆amp;＆＃34; Supplies＆＃34;进入正如你在dataset2中看到的那样，我只能将它与＃34; Books＆＃34;相提并论。其次，当选中/取消选中复选框时，如何让它更新。我也为此创建了一个小提琴。谢谢你。https://jsfiddle.net/at2046/mqjyjfox/8/

var dataset = [['Books','GEB'],
                                ['Books','Decision Theory'],
                                ['Supplies','Pencil'],
                ['Supplies','Paper']
                ];

document.getElementById("demo").innerHTML = dataset;

var dataset2 = dataset.filter(function (el) {
        return el[0] == "Books";
        });

document.getElementById("demo2").innerHTML = dataset2;


$(":checkbox").change(function() {
var dataset3 = dataset.filter(function(el) {
var checkboxes = document.getElementsByName('result');
for (var index = 0; index < checkboxes.length; index++) {
return el[0] == checkboxes[index].value;
    }
});

document.getElementById("demo3").innerHTML = dataset3;
});

Answer 1

首先，你添加了一个$（：复选框＆＃39;），这是一个jQuery语法，你没有在你的小提琴中加载库。

然后，在return内使用for，这意味着在第一次迭代（选择Books）时，脚本将退出，只返回属于选项列表中第一项的元素。

选项是替换for的{{1}}以检查el [0]是否存在于任何选项中。

最后，您没有检查复选框是否已选中，这意味着无论复选框的状态如何，都会返回所有内容。

while

https://jsfiddle.net/mqjyjfox/10/

Answer 2

在这里，我为复选框项目使用了美食。以下代码片段给出了复选框过滤的逻辑。 handleCuisineChange 是包含逻辑的函数。 for 循环的长度是 8，因为我在这里选取的菜系数量（复选框项目的数量）是 8。将这里的 cuisines 替换为您的复选框数据。应用此逻辑，您的复选框项目就可以过滤了。

在 axios 中，我使用了自己的后端 API getCuisine 和端口号 7000。

axios I used my own backend API getCuisine and port number 7000.

handleCuisineChange=(cuisine_id)=>
    {
        const {cuisineArray}=this.state; //an empty array declared in constructor
       
        if (cuisineArray.indexOf(cuisine_id) == -1)
        {
            cuisineArray.push(cuisine_id);
        }
        else
        {
            var index=cuisineArray.indexOf(cuisine_id);
            cuisineArray.splice(index,1);
        }    

        const {cuisineArray2}=this.state; //an empty array declared in constructor
        let i=0;
        for (i=0;i<8;i++)
        {
            if(cuisineArray[i]==undefined)
            {
                cuisineArray2[i]=cuisineArray[0];
            }
            else
            {
                cuisineArray2[i]=cuisineArray[i];
            }
        }

        this.props.history.push(`/checking3?cuisine_id1=${cuisineArray2[0]}&cuisine_id2=${cuisineArray2[1]}&cuisine_id3=${cuisineArray2[2]}&cuisine_id4=${cuisineArray2[3]}&cuisine_id5=${cuisineArray2[4]}&cuisine_id6=${cuisineArray2[5]}&cuisine_id7=${cuisineArray2[6]}&cuisine_id8=${cuisineArray2[7]}`);
        let filterObj={cuisine_id1:cuisineArray2[0],cuisine_id2:cuisineArray2[1],cuisine_id3:cuisineArray2[2],cuisine_id4:cuisineArray2[3],cuisine_id5:cuisineArray2[4],cuisine_id6:cuisineArray2[5],cuisine_id7:cuisineArray2[6],cuisine_id8:cuisineArray2[7]};
        axios(
            {
                method:'POST',
                url:`http://localhost:7000/getCuisine`,
                headers:{'Content-Type':'application/json'},
                data:filterObj
            }
        )
        .then(res=>
            {
                this.setState({restaurants:res.data.restaurants});
            })
        .catch(err=>console.log(err))
    }

render()
    {
        const {restaurants}=this.state;
        return(
            
                <div>
                   
                            <input type="checkbox" name="cuisines" id={"1"} onChange={(event) => this.handleCuisineChange("1")}  />
                            <span className="checkbox-items" > North Indian </span> <div style={{display: "block"}}> </div>
                            <input type="checkbox" name="cuisines"  id={"2"} onChange={(event) => this.handleCuisineChange("2")}  />
                            <span className="checkbox-items" > south indian </span> <div style={{display: "block"}}> </div>
                            <input type="checkbox" name="cuisines" id={"3"} onChange={(event) => this.handleCuisineChange("3")}  />
                            <span className="checkbox-items" > chinese </span> <div style={{display: "block"}}> </div>
                            <input type="checkbox" name="cuisines" id={"4"} onChange={(event) => this.handleCuisineChange("1")}  />
                            <span className="checkbox-items" > fast food </span> <div style={{display: "block"}}> </div>
                            <input type="checkbox" name="cuisines" id={"5"} onChange={(event) => this.handleCuisineChange("1")}  />
                            <span className="checkbox-items" > Street food </span> <div style={{display: "block"}}> </div>
                            <input type="checkbox" name="cuisines" id={"6"} onChange={(event) => this.handleCuisineChange("1")}  />
                            <span className="checkbox-items" > American </span> <div style={{display: "block"}}> </div>
                            <input type="checkbox" name="cuisines" id={"7"} onChange={(event) => this.handleCuisineChange("1")}  />
                            <span className="checkbox-items" > Italian </span> <div style={{display: "block"}}> </div>
                            <input type="checkbox" name="cuisines" id={"8"} onChange={(event) => this.handleCuisineChange("1")}  />
                            <span className="checkbox-items" > Mexican </span> <div style={{display: "block"}}> </div>
                </div>
       )
  } //render end

基于Checkbox的Javascript数据过滤器

2 个答案: