带有复选框的 JavaScript 过滤器

Javascript Filter With Checkbox

本文关键字：JavaScript 过滤器 复选框      更新时间：2023-09-26

我正在尝试使用复选框来过滤页面内容。当我选中该框时，我让它隐藏了内容，但在取消选中时它不会再次显示所有内容。任何帮助将不胜感激。提前谢谢你。

$(document).ready(function() {
$('input').change(function(){
    $('input').each(function(){
        var checked;
        if (checked = $(this).attr('checked'));
        var reclessons = $('li[data-rec='+$(this).data('rec')+']');
        checked ?  reclessons.show('slow'): reclessons.hide('slow');
    });
    var unchecked=0;
    if(unchecked=0){$('li').show('slow');}
});
});

这是你想要的基础。请注意要选中的prop。

http://jsfiddle.net/stevemarvell/kEkdy/

<input type="checkbox" data-target="thing1" checked="1"/>
<div id="thing1">Thing 1</div>
<input type="checkbox" data-target="thing2" checked="1"/>
<div id="thing2">Thing 2</div>

有了这个jquery：

$(document).ready(function() {
    $('input[type=checkbox][data-target]').change(function() {
        var checked = $(this).prop('checked');
        var target = $(this).data('target');
        $('#' + target).toggle(checked);
    });
});

.attr()方法不返回布尔值，也是赋值=，您不比较这些值，您应该使用==或===运算符进行比较。

var $ch = $('input[type=checkbox]');
$ch.change(function() {
    // show/hide the related `li` element
    $('li[data-rec='+$(this).data('rec')+']').toggle(this.checked);
    // show all `li` elements if there is no checked checkbox 
    if ( $ch.filter(':checked').length === 0 ) {
       $('li').show();
    } 
});
在这里，

我为我的复选框项目使用了美食。以下代码片段提供了复选框筛选的逻辑。 handleCuisineChange是包含逻辑的函数。for循环的长度是 8，因为我在这里采取的美食数量（复选框项目的数量）是 8。将此处的cuisines替换为复选框数据。应用此逻辑，您的复选框项已准备好进行筛选。

在axios内部，我使用了自己的后端 API getCuisine和端口号 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

相关文章：