selectAll

selectAll

关注
发信
关注(28)粉丝(399)

javascript - 如何将全选选项添加到jQuery过滤器

我已经设法开始使用此过滤器，剩下要做的就是了解如何使“全选”功能正常工作。它一直困扰着我。



// 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>

最佳答案

通过使用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;
}

关于javascript - 如何将全选选项添加到jQuery过滤器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57796553/

10-09 13:56
Powered by LMLPHP ©2024 selectAll 0.028838