带有复选框的 Javascript 过滤器答案

【问题标题】：Javascript Filter With Checkbox带有复选框的 Javascript 过滤器
【发布时间】：2023-04-05 01:13:01
【问题描述】：

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

$(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');}
});
});

【问题讨论】：

只是一个建议，给过滤复选框自己的类，然后选择它们，而不是选择所有输入。
您的if 语句都没有==
第一个是短手，第二个是错误

标签： javascript jquery checkbox filter

【解决方案1】：

这是您想要的基础。请注意 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);
    });
});

【讨论】：

【解决方案2】：

.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();
    } 
});

【讨论】：

你真的应该使用.prop("checked")
@stevemarvell 为什么？ .prop('checked') 返回 .checked 属性的值，即 this.checked。没有区别。
但事实上.prop() 是为这项工作而设计的，而.checked 是一个未记录的功能。
@stevemarvell 实际上.prop() 不属于任何标准。它只是 jQuery 对象的 (helper) 方法，w3.org/TR/2012/WD-html5-20121025/…
许多正在使用的都是记录在案的辅助函数。

【解决方案3】：

在这里，我在复选框项目中使用了美食。以下代码 sn-p 给出了复选框过滤的逻辑。 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

【讨论】：