我正在尝试使用复选框来过滤页面内容。当我选中该框时,我得到它隐藏内容,但是当未选中时它不再显示所有内容。任何帮助将不胜感激。提前谢谢。
$(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');}
});
});
答案 0 :(得分: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);
});
});
答案 1 :(得分:0)
.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();
}
});
答案 2 :(得分:0)
在这里,我为复选框项目使用了美食。以下代码片段给出了复选框过滤的逻辑。 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