jquery - 多选下拉列表 : Custom Checkbox

Question

我已经筋疲力尽了。我正在从事一个元素，该元素有多个多选下拉菜单，旨在将其选中以过滤结果。我试图让复选框成为一个自定义的复选框，以 png 格式提供给我，无论我尝试什么，都没有任何效果。这令人沮丧，因为对于单选下拉菜单，它似乎很容易工作。

我尝试过许多不同的插件，它们都做着几乎相同的事情，这似乎覆盖了任何替换操作系统提供的默认复选框的尝试。以下是我尝试过的一些插件示例:

multiple select
multi-select dropdown list
bootstrap multiselect

对于单选菜单，以下方法工作正常:

input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + label span {
    display:inline-block;
    width:6px;
    height:6px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url('../images/check_radio_sheet.png') left top no-repeat;
    cursor:pointer;
    margin-right:12px;
}

input[type="checkbox"]:checked + label span {
    background:url('../images/check_radio_sheet.png') -10px top no-repeat;
}

根据不同的插件如何布局元素来创建下拉菜单，我调整了 CSS 选择器。我绝对可以移动复选框、隐藏它们等等，所以我知道我使用的是正确的 CSS 规则。我就是不能让他们使用小 Sprite 表。

我到处找了几个小时，但什么也想不出来。这么小、这么难弄清楚的事情真的扼杀了我的信心，因为我已经花了比我愿意承认的更多的时间。谁能帮上忙，谁就是我眼中永远的圣人!

Answer 1

试试这个更新了......

  $('#txtPL').keyup(function () {
        filter(this);
    });

function filter(element) {
        var value = $(element).val().toLowerCase();
        $(".customDrop > li").each(function () {
            if ($(this).text().toLowerCase().indexOf(value) > -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
        $(".customDrop").show();
    }
  
  $( "#chkAll" ).change(function() {
  var chkAll = $(this).is(':checked');
     if (chkAll)
     $(".chkProduct").prop("checked", true);
     else
     $(".chkProduct").prop("checked", false);
});
    
    

.scrollable{
   overflow: auto;
   width: 300px; /* adjust this width depending to amount of text to display */
   height: 200px; /* adjust height depending on number of options to display */
 
 }
 .scrollable select{
   border: none;
 }
 .customDrop, customDropHeader
 {
    padding-left:0px !important;
     z-index:999999999;
     position:absolute;
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
     }
 .listItemPL
 {
     cursor:pointer;
     padding:5px;
        border:1px solid #94c0d2;
     list-style:none;
     border-bottom-style:none;
     background-color:#daecf4;
     
     
     }
     .listItemPL:hover
     {
   background-color: #9ED9F9;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h3>
 Type Below Developer Name
</h3>
<ul class="customDropHeader" style=" padding-left:0px; margin-bottom:0px;">
<li class="k-textbox">
<input type="text"  autocomplete="off" name="name" id="txtPL"/>
</li>
</ul>
<ul class="customDrop" style="max-height:200px; overflow-y:scroll; margin-top:2px;">
<li class="listItemPL" style=" max-width:380px; min-width:380px; ">
<label>  
<input type="checkbox" id="chkAll" onchange="SelectAll()" value="0" /> Select All</label>

</li>

<li class="listItemPL" style=" max-width:380px; min-width:380px;">
<label>          
<input type="checkbox" name="AllcheckedProductsPL"  class="chkProduct"  /> Naresh Sharma </label>
</li>
<li class="listItemPL" style=" max-width:380px; min-width:380px;">
<label>          
<input type="checkbox" name="AllcheckedProductsPL"  class="chkProduct"  /> Shiv kumar Shrimali </label>
</li>
<li class="listItemPL" style=" max-width:380px; min-width:380px;">
<label>          
<input type="checkbox" name="AllcheckedProductsPL"  class="chkProduct"  /> Praksh Menaria </label>
</li>
<li class="listItemPL" style=" max-width:380px; min-width:380px;">
<label>          
<input type="checkbox" name="AllcheckedProductsPL"  class="chkProduct"  /> Yogesh Malviya </label>
</li>
<li class="listItemPL" style=" max-width:380px; min-width:380px;">
<label>          
<input type="checkbox" name="AllcheckedProductsPL"  class="chkProduct"  /> Vikas Jain </label>
</li>
<li class="listItemPL" style=" max-width:380px; min-width:380px;">
<label>          
<input type="checkbox" name="AllcheckedProductsPL"  class="chkProduct"  /> Neelkanth Purohit </label>
</li>
</ul>


</h1>
</h1>