无法在 each 语句中捕获选中状态 (true/false)，之前在单击事件中定义

Question

这是我的代码，所以你已经猜到我的问题了：

const solutionChecks = $('#solution-checks :checkbox');
const searchFire = $('.search h6');
const solutionForm = $('#solution-checks');

solutionChecks.click(function() {
  $("div[data-category]").hide();
  var showAll;
  if (solutionChecks.is(":checked")) {
    var showAll = true;
  } else {
    var showAll = false;
  }
  
  solutionChecks.find("input").add(':checked').each(function() {
    if (solutionChecks.find("input").add(':checked').length == null) {
      $("div[data-category]").show();
    }
    
    $("div[data-category*=" + $(this).val() +"]").show();
  });
});

searchFire.click(function() {
  $(this).next('.absolute').toggleClass('show');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container-md search">
  <div class="row">
    <div class="col-md-4">
      <h6>Selection</h6>
      <div class="absolute">
        <form id="solution-checks">

          <label>
            <input type="checkbox" name="Businesses" value="Businesses" id="Businesses"> Businesses                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Accountancy" value="Accountancy" id="Accountancy"> Accountancy                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Banks" value="Banks" id="Banks"> Banks                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Partners" value="Partners" id="Partners"> Partners                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Developers" value="Developers" id="Developers"> Developers                
            <span class="checkmark"></span>
          </label>
          <br>
        </form>
      </div>
    </div>
  </div>
  
</div>

<div class="container-md px-0 solutions">
  <div class="row">
    <div class="col-md-4" data-category="Accountancy">

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

    <div class="col-md-4" data-category="Partners">

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

    <div class="col-md-4" data-category="Accountancy">

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

  </div>
</div>

所以，问题很简单：我正在构建一个基于复选框的搜索过滤器。

如果您根据选择检查一个或多个输入，带有 select 或未选择的框将消失，但一个或 selected 将保留在那里。

我正在使用 jquery 和一个点击事件来触发系统。但问题是如果您 select 没有任何选择会发生什么。本质上，由于您将在触发事件（单击）后立即隐藏所有内容，因此所有框都将保持隐藏状态。在我的代码中，我创建了一个 if 语句，希望能够捕捉到 true 和 false 状态，但不幸的是，它并没有起作用。它不起作用的原因是因为这个原因：在我遍历所有元素之前，我能够捕获状态（true/false 我的输入）但紧接着，我将能够捕获只有真实的陈述。

我这么说是因为我试图在每个函数中创建一个 if 语句来捕获检查的长度 selector:

if (solutionChecks.find("input").add(':checked')).length == 0){}

这不起作用，因为就像我说的，出于某种原因，在 each 语句中，我的变量 showAll 不起作用。我试图将变量放在每个语句中，但它也不起作用，它只在每个语句之外起作用。

我的问题是：如何捕捉点击状态？

谢谢

Answer 1

You can add a simple check to see if no categories are selected. If no categories are selected, show all div's

// check if no categories are selected
if ($('#solution-checks :checkbox:checked').length == 0) {
    // show all categories
    $("div[data-category]").show();
}

Here's an updated version of you snippet with the check added

const solutionChecks = $('#solution-checks :checkbox');
const searchFire = $('.search h6');
const solutionForm = $('#solution-checks');

solutionChecks.click(function() {
  $("div[data-category]").hide();
  
  // check if no categories are selected
  if ($('#solution-checks :checkbox:checked').length == 0) {
      // show all categories
      $("div[data-category]").show();
      return;
  }
  
  solutionChecks.find("input").add(':checked').each(function() {
    if (solutionChecks.find("input").add(':checked').length == null) {
      $("div[data-category]").show();
    }
    
    $("div[data-category*=" + $(this).val() +"]").show();
  });
});

searchFire.click(function() {
  $(this).next('.absolute').toggleClass('show');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container-md search">
  <div class="row">
    <div class="col-md-4">
      <h6>Selection</h6>
      <div class="absolute">
        <form id="solution-checks">

          <label>
            <input type="checkbox" name="Businesses" value="Businesses" id="Businesses"> Businesses                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Accountancy" value="Accountancy" id="Accountancy"> Accountancy                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Banks" value="Banks" id="Banks"> Banks                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Partners" value="Partners" id="Partners"> Partners                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Developers" value="Developers" id="Developers"> Developers                
            <span class="checkmark"></span>
          </label>
          <br>
        </form>
      </div>
    </div>
  </div>
  
</div>

<div class="container-md px-0 solutions">
  <div class="row">
    <div class="col-md-4" data-category="Accountancy">

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

    <div class="col-md-4" data-category="Partners">

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

    <div class="col-md-4" data-category="Accountancy">

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

  </div>
</div>

Answer 2

看看这个。你太努力了

const $solutionChecks = $('#solution-checks :checkbox');
const $searchFire = $('.search h6');
const $solutionForm = $('#solution-checks');

$solutionChecks.on("click",function() {
  const $checked = $solutionForm.find(":checked"); // not solutionChecks
  if ($checked.length === 0) { // nothing checked
    $("div[data-category]").show(); // show all
    return; // stop looking further
  }
  $("div[data-category]").hide(); // hide all
  $checked.each(function() {
    const val = $(this).val();
    $(`div[data-category^=${val}]`).show(); // show only checked
  });
});
// not part of the problem
$searchFire.on("click",function() {
  $(this).next('.absolute').toggleClass('show');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container-md search">
  <div class="row">
    <div class="col-md-4">
      <h6>Selection</h6>
      <div class="absolute">
        <form id="solution-checks">

          <label>
            <input type="checkbox" name="Businesses" value="Businesses" id="Businesses"> Businesses                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Accountancy" value="Accountancy" id="Accountancy"> Accountancy                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Banks" value="Banks" id="Banks"> Banks                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Partners" value="Partners" id="Partners"> Partners                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Developers" value="Developers" id="Developers"> Developers                
            <span class="checkmark"></span>
          </label>
          <br>
        </form>
      </div>
    </div>
  </div>

</div>

<div class="container-md px-0 solutions">
  <div class="row">
    <div class="col-md-4" data-category="Accountancy">Accountancy

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

    <div class="col-md-4" data-category="Partners">Partners

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

    <div class="col-md-4" data-category="Accountancy">More Accountancy

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

  </div>
</div>

无法在 each 语句中捕获选中状态 (true/false)，之前在单击事件中定义

Impossibility to catch the checked status (true/false) inside an each statement, previous defined in a click event

jquery

checkbox

filter

each