如何將全選選項添加到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> 

^{這段代碼僅供參考 ..根據您要執行的操作，仍然需要大量工作}

額外：

• 沒有什么是visible:在CSS中，它應該是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; .col- min-height : 1px; ..為了避免此復制/將下一個代碼粘貼到CSS樣式表中

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