javascript - 如何向 jquery 过滤器添加全选选项

Question

我已经成功开始使用这个过滤器，唯一要做的就是了解如何让“全选”功能正常工作。它一直困扰着我。

// Javascript
$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        var inputValue = $(this).attr("value");
        $("." + inputValue).toggle();
    }); 
});

.hidden {
  visible: hidden;
  position: absolute;
  left: 20px;
  top: 5px;
  z-index: -1;
}

.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
label{ margin-right: 15px; }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container p-5">
  <div class="row">
    <div class="col-sm-12">
      <label class="btn btn-md btn-primary">
        <input type="checkbox" name="colorCheckbox" class="hidden" value="all">Select All
      </label>
      <label class="btn btn-md btn-primary">
        <input type="checkbox" name="colorCheckbox" class="hidden" value="red">Red
      </label>
      <label class="btn btn-md btn-primary">
        <input type="checkbox" name="colorCheckbox" class="hidden" value="green">Green
      </label>
      <label class="btn btn-md btn-primary">
        <input type="checkbox" name="colorCheckbox" class="hidden" value="blue">Blue
      </label>

      <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
      <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
      <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>  
    </div>
  </div>
</div>

Answer 1

通过使用 addClass() 、 removeClass() 和 toggleClass() ，实现这一点会容易得多

• 您可以使用 .val() 代替 .attr('value')

• 使用if语句检查selectAll复选框值

• 将 .box.show 类添加到您的 CSS 样式表

• 对于 checkbox，使用 .change 而不是 .click

// Javascript
$(document).ready(function(){
    $('input[type="checkbox"]').change(function(){
        var inputValue = $(this).val();  // input value
        if(inputValue == 'all' && $(this).is(":checked")){   // check the selectAll value and this is checked
          $(".box").addClass('show'); // Add class show to all the box
        }else if(inputValue == 'all' && !$(this).is(":checked")){
          $(".box").removeClass('show');
        }else{
          $("." + inputValue).toggleClass('show'); // toggle class show
        }
    });
});

.hidden {
  visibility: hidden;
  position: absolute;
  left: 20px;
  top: 5px;
  z-index: -1;
}

.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}
.box.show{
  display : block;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
label{ margin-right: 15px; }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container p-5">
  <div class="row">
    <div class="col-sm-12">
      <label class="btn btn-md btn-primary">
        <input type="checkbox" name="colorCheckbox" class="hidden" value="all">Select All
      </label>
      <label class="btn btn-md btn-primary">
        <input type="checkbox" name="colorCheckbox" class="hidden" value="red">Red
      </label>
      <label class="btn btn-md btn-primary">
        <input type="checkbox" name="colorCheckbox" class="hidden" value="green">Green
      </label>
      <label class="btn btn-md btn-primary">
        <input type="checkbox" name="colorCheckbox" class="hidden" value="blue">Blue
      </label>

      <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
      <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
      <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>  
    </div>
  </div>
</div>

^{此代码仅用于开始 ..根据您想要执行的操作，仍然需要做很多工作}

附加:

• CSS 中没有任何名为 visible: 的内容，它应该是 visibility:

• 获取选中复选框的数量$('input[type="checkbox"]:checked').length

让我们走得更远，让事情变得更复杂

假设您想向过滤器复选框以及 selectAll 复选框添加一些操作，以更改类或更改 selectAll 按钮样式，或检查是否选中所有按钮，如果选中，则更改 selectAll 按钮类等

下一个代码的主要思想是: selectAll 按钮会将复选框更改为选中或未选中，此更改将影响显示/隐藏框本身，因此无需在此处进行 selectAll按钮控制显示/隐藏框。 它将控制复选框而不是框

// Javascript
$(document).ready(function(){
    $('.filter input[type="checkbox"]').change(function(){
        var input = $(this);  // this input
        var inputValue = input.val();  // this input value
        var inputLabel = input.closest('label'); // get the closest label
        
        if(input.hasClass('all-boxes')){ // if its selectAll button
          ToggleCheckboxes(input);
        }else{
          input.toggleClass('Checked notChecked');
          inputLabel.toggleClass('btn-success');
          ToggleBoxes(inputValue);
          // get checked checkboxes
          var countAllCheckboxes = $('.filter-boxes').length;
          var countChecked = $('.filter-boxes.Checked').length;
          if(countAllCheckboxes == countChecked){
            $(".all-boxes").prop('checked' , true).closest('label').addClass('btn-success');
          }else{
            $(".all-boxes").prop('checked' , false).closest('label').removeClass('btn-success');
          }
        }
    });
});

// show/hide boxes
function ToggleBoxes(Selector){
  $("." + Selector).toggleClass('show');
}

// toggle the checkboxes to checked/unchecked
function ToggleCheckboxes(Selector){
  var GetChecked = Selector.is(':checked')? 'notChecked':'Checked';
  console.log(GetChecked);
  $('.filter-boxes.'+ GetChecked).change();
}

.hidden {
  visibility: hidden;
  position: absolute;
  left: 20px;
  top: 5px;
  z-index: -1;
}

.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}
.box.show{
  display : block;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
label{ margin-right: 15px; }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container p-5">
  <div class="row">
    <div class="col-sm-12 filter">
      <label class="btn btn-md btn-primary">
        <input type="checkbox" name="colorCheckbox" class="hidden all-boxes" value="all">Select All
      </label>
      <label class="btn btn-md btn-primary">
        <input type="checkbox" name="colorCheckbox" class="hidden filter-boxes notChecked" value="red">Red
      </label>
      <label class="btn btn-md btn-primary">
        <input type="checkbox" name="colorCheckbox" class="hidden filter-boxes notChecked" value="green">Green
      </label>
      <label class="btn btn-md btn-primary">
        <input type="checkbox" name="colorCheckbox" class="hidden filter-boxes notChecked" value="blue">Blue
      </label>

      <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
      <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
      <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>  
    </div>
  </div>
</div>

以 css 样式更改项目之间的空白高度

.item-selected {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 5px;  /* <<<<<< here */
  background: #cccccc;
}

项目之间的空白高度不同的原因是因为所有 .col- 类都有一个 min-height : 1px; .. 为了避免这种复制/将下一个代码粘贴到您的 CSS 样式表

#selfPacedList .col-sm-12{
  min-height : 0px;
}