jquery附加所有值

Question

其實我想附加到div只檢查值，但它也附加未檢查的值。我使用in_array函數來檢查條件，如果值被選中意味着只附加選中的值不是全部，但是它附加了所有的值，但它只檢查值，請有人幫我出來..

以下是HTML和PHP代碼： -

<div class="flDrop"> 
    <div class="flDropDiv"> 
     <?php 
     foreach ($filter_group['filter'] as $filter) { ?> 
      <?php 
      if(in_array($filter['filter_id'],$filter_category)) 
      { ?> 
       <input name="filter[]" type="checkbox" value="<?php echo $filter['filter_id']; ?>" checked> <?php echo $filter['name'];?> 
      <?php } else {?> 
       <input name="filter[]" type="checkbox" value="<?php echo $filter['filter_id']; ?>"> <?php echo $filter['name'];?> 
      <?php }?> 
     <?php }?> 
    </div> 
</div> 

Jquery的代碼： -

setTimeout(function(){ 
    var filter_len = $('input[name^=\'filter\']:checked').length 
    // alert(filter_len);return false; 
    $("#auto_filter_values").empty(); 
    if(filter_len>1){ 
     /*$("#auto_filter_values").append('<div class="afr clearall">Clear All filters</div>');*/ 
    } 
    $('input[name^=\'filter\']:checked').each(function(element) { 

     $("#auto_filter_values").append('<div class="afr fSbtn" id="fSfilter'+this.value+'" data-val="'+this.value+'">'+$(this).parent().text().replace(/\(([A-Za-z0-9 ]+?)\)/, '')+'<span class="fSc"></span></div>'); 
    }); 
    }, 100); 

Answer 1

工作細一些小的變化（其實例代碼）： -

setTimeout(function(){ 
 
    $.each($("input[name='filter[]']:checked"), function(){ //change here   
 
     $("#auto_filter_values").append('<div class="afr fSbtn" id="fSfilter'+this.value+'" data-val="'+this.value+'">'+$(this).attr('data-id')+'<span class="fSc"></span></div>'); // changes here 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="flDrop"> 
 
    <div class="flDropDiv"> 
 
     <input name="filter[]" type="checkbox" value="1" data-id ="Black" checked> Black <br> 
 
     <input name="filter[]" type="checkbox" value="2" data-id ="Black">Red<br/> 
 
     <input name="filter[]" type="checkbox" value="3" data-id ="Pink" checked>Pink<br/> 
 
     <input name="filter[]" type="checkbox" value="4" data-id ="Blue">Blue<br/> 
 
    </div> 
 
</div> 
 

 
<div id = "auto_filter_values" style ="margin-top:30px;"></div>

注： - 你需要的複選框，添加data-id屬性與你的顏色名稱，然後你可以很容易地