jQuery复选框过滤器，工作，但想要重置时，未选中 [英] jQuery checkbox filter, working but want to reset when unchecked

问题描述

我正在为选择的公寓建立过滤器。我已经想出了如何使用滑块进行过滤，现在还需要使用两个复选框来过滤多个卧室。

 < form name =filtermethod =postaction => 
< p>卧室
< input id =1bdrmtype =checkboxvalue =1bdrm/> 1 Bedroom 
< input id =2bdrmtype = checkboxvalue =2bdrm/> 2 Bedroom 
< / p> 
< / form> 
  

到目前为止，我的过滤器限制了选择只显示一个卧室单位，但不能了解如何在取消选中复选框时重置并显示所有单位。

  //设置单位的值
 $（'＃cohen'）。data（{
 id ：4，
 sqft：976，
 bdrms：2 
}）; 
 $（'＃curnoe'）。data（{
 id：5，
 sqft：572，
 bdrms：2 
}）; 
 $（'＃richler'）。data（{
 id：6，
 sqft：624，
 bdrms：2 
}）; （b 
 $（'＃carr'）。 （$＃$ b $（'＃lawrence'）。data 
 
 //根据卧室数量过滤
 $（document）.ready（function（）{
 var theValue; 
 
 $（＃1bdrm ）.click（function（）{
 filterItems（）; 
}）; 
}）; 
 
函数filterItems（）{
 $ .each（$（'。condo-box'），function（）{
 $ this = $（this）; 
 itemData = $ this.data（）; 
 if（itemData.bdrms == 1）{
 $ this.show（）; 
 itemData.matching = true; 
} else {
 $ this.hide（）; 
 itemData.matching = false; 
} 
}）; 
} 
  

下面是一个小提琴链接.. https://jsfiddle.net/3y9vz1q1/ 我使用.data方法在每个单元上存储唯一属性，以便我可以筛选每个属性（例如：我为滑块写了另一个脚本，以sqft为单位限制公寓。

希望社区能指引我朝着正确的方向前进！ >

Marc。

解决方案

c $ c> bdrms 设置为1，因为它是不可见的，所以一旦它们不可见，它们将保持这种状态。有几种方法可以解决这个问题，其中一个是当复选框未被选中时被调用的单独函数：

  if（ $（this）.is（'：checked'））{
 filterItems（）; 
} else {
 resetAll（）; 
} 
  

在这之后，编写一个函数可以将可见元素重新设置为可见：

 函数resetAll（）
 {
 $ .each（$（'。condo-box'），function（）{
 $ this = $（this）; 
 if（$ this.is（：hidden））{
 $ this.show（）; 
} 
}）; 
} 
  

因此更新你的小提琴将是： https://jsfiddle.net/3y9vz1q1/1/ 其中正常工作。

更新：

一个更好的解决方案是使这两个复选框工作并使用单个函数：

  $（document）.ready（function（）{
 $（＃1bdrm，＃2bdrm）。click（function（）{
 var bdrm1 = false; 
 var bdrm2 = false; 
 if（$（＃1bdrm）。is（'：checked'））{
 bdrm1 = true; $ b $ （$：＃2bdrm）。（'：checked'））{
 bdrm2 = true; 
} 
 
 filterItems（bdrm1， bdrm2）; 
}）; 
}）; 
 $ b函数filterItems（bdrm1，bdrm2）{
 $ .each（$（'.condo-box'），function（）{
 $ this = $（this）; 
 itemData = $ this.data（）; 
 if（bdrm1&！bdrm2）{
 if（itemData.bdrms == 1）{
 $ this.show （）; 
 itemData.matching = true; 
} else {
 $ this.hide（）; 
 itemData.matching = false; 
} 
 } 
 else if（bdrm2&&！bdrm1）{
 if（itemData.bdrms == 2）{
 $ this.show（）; 
 itemData.matching = true; 
} else {
 $ this.hide（）; 
 itemData.matching = false; 
} 
} else {
 $ this.show （）; 
 itemData.matching = true; 
} 
}）; 
 
  

小提琴更新： https://jsfiddle.net/3y9vz1q1/2/

I'm building a filter for a selection of condos. I've figured out how to filter using a slider and now also need to filter by number of bedrooms using two checkboxes.

<form name="filter" method="post" action="">
  <p>Bedrooms
    <input id="1bdrm" type="checkbox" value="1bdrm" />1 Bedroom
    <input id="2bdrm" type="checkbox" value="2bdrm" />2 Bedroom
  </p>
</form>

So far I have the filter limiting the selection to show only 1 bedroom units, but can't figure out how to reset and show all units when unchecking the checkbox.

// Set values for units
$('#cohen').data({
  id: 4,
  sqft: 976,
  bdrms: 2
});
$('#curnoe').data({
  id: 5,
  sqft: 572,
  bdrms: 2
});
$('#richler').data({
  id: 6,
  sqft: 624,
  bdrms: 2
});
$('#carr').data({
  id: 7,
  sqft: 544,
  bdrms: 1
});
$('#lawrence').data({
  id: 10,
  sqft: 467,
  bdrms: 1
});

//filter by number of bedrooms
$(document).ready(function() {
  var theValue;

  $("#1bdrm").click(function() {
    filterItems();
  });
});

function filterItems() {
  $.each($('.condo-box'), function() {
    $this = $(this);
    itemData = $this.data();
    if (itemData.bdrms == 1) {
      $this.show();
      itemData.matching = true;
    } else {
      $this.hide();
      itemData.matching = false;
    }
  });
}

Here's a fiddle link.. https://jsfiddle.net/3y9vz1q1/ I'm using the .data method to store unique attributes on each unit so that i can filter for each attribute (example: I have another script written for a slider that limits condos by sqft.

Hoping the community can point me in the right direction! Thanks in advance.

Marc.

解决方案

You are marking elements that have the data tag bdrms set to 1 as invisible. This does not change. So once they are invisible, they will remain that way.

There are several ways to solve this, one being a seperate function that's being called when the checkbox isn't checked:

if($(this).is(':checked')){
    filterItems();
} else {
    resetAll();
}

After that it's a simple matter of writing a function that resets the invisble elements back to visible:

function resetAll()
{
    $.each($('.condo-box'), function() {
        $this = $(this);
        if($this.is(":hidden")){
            $this.show();
        }
    });
}

So updating your fiddle would be: https://jsfiddle.net/3y9vz1q1/1/ Which works fine.

UPDATE:

A far better solution would be to make both checkboxes work and use a single function:

$(document).ready(function() {
    $("#1bdrm, #2bdrm").click(function() {
    var bdrm1 = false;
    var bdrm2 = false;
    if($("#1bdrm").is(':checked')){
        bdrm1 = true;
    }
    if($("#2bdrm").is(':checked')){
        bdrm2 = true;
    }

    filterItems(bdrm1, bdrm2);
  });
});

function filterItems(bdrm1, bdrm2){
    $.each($('.condo-box'), function() {
    $this = $(this);
    itemData = $this.data();
    if(bdrm1 && !bdrm2){
      if(itemData.bdrms == 1){
        $this.show();
        itemData.matching = true;
      } else {
        $this.hide();
        itemData.matching = false;
      }
    }
    else if(bdrm2 && !bdrm1){
      if(itemData.bdrms == 2){
        $this.show();
        itemData.matching = true;
      } else {
        $this.hide();
        itemData.matching = false;
      }
    } else {
        $this.show();
        itemData.matching = true;
    }
  });
}

Fiddle update: https://jsfiddle.net/3y9vz1q1/2/

这篇关于jQuery复选框过滤器，工作，但想要重置时，未选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！