Question

我在项目中使用iCheck http://icheck.fronteed.com/ 但它会阻止我的js代码。这是代码：

1）复选框列表

<div class="list_box">
<dl>
     <dt><span>FORM-FACTOR</span></dt>
     <dd>
     <ul>
         <li><label><input class="chk_all" type="checkbox" name="cateChk_0_all" value="all" checked="">Select All</label></li>
         <li class=""><label><input type="checkbox" value="AAA" name="cateChk_0_arr" checked="" >AAA</label></li>
         <li class=""><label><input type="checkbox" value="BBB" name="cateChk_0_arr" checked="" >BBB</label></li>
         <li class=""><label class=""><input type="checkbox" value="CCC" name="cateChk_0_arr" checked="" >CCC</label></li>

     </ul>
     </dd>
</dl>
<dl>
     <dt><span>TYPES</span></dt>
     <dd>
     <ul>
         <li><label><input class="chk_all" type="checkbox" name="cateChk_1_all" value="t_all" checked="">Select All</label></li>
         <li class=""><label><input type="checkbox" value="type_1" name="cateChk_1_arr" checked="" >type_1</label></li>
         <li class=""><label><input type="checkbox" value="type_2" name="cateChk_1_arr" checked="" >type_2</label></li>
         <li class=""><label class=""><input type="checkbox" value="type_3" name="cateChk_0_arr" checked="" >type_3</label></li>

     </ul>
     </dd>
</dl>

<div class="btn_search"><a href="#" type="submit"> Search</a></div>

</div>

2）和产品清单：

<ul class="thumb_list">
    <li class="thumb_1 flower" data-category="AAA TYPE_1 ">
       <a href="www.link_1.com">
       <div class="txt_box">
           <div class="p_info">
           <span class="p_number"> Product#1 </span>
           <span class="title1">Product#1 description </span>
           </div>
      </div>
      </a>
  </li>

   <li class="thumb_2 flower" data-category="BBB TYPE_2 ">
       <a href="www.link_2.com">
       <div class="txt_box">
           <div class="p_info">
           <span class="p_number"> Product#2 </span>
           <span class="title1">Product#2 description </span>
           </div>
      </div>
      </a>
  </li>

  <li class="thumb_3 flower" data-category="CCC TYPE_3 ">
       <a href="www.link_3.com">
       <div class="txt_box">
           <div class="p_info">
           <span class="p_number"> Product#3 </span>
           <span class="title1">Product#3 description </span>
           </div>
      </div>
      </a>
  </li>
</ul>

此脚本不使用iChek.js，但无效。

<script>
var $filterCheckboxes = $('input[type="checkbox"]');

$filterCheckboxes.on('change', function() {
    var selectedFilters = {};

        $filterCheckboxes.filter(':checked').each(function() {
        if (!selectedFilters.hasOwnProperty(this.name)) {
        selectedFilters[this.name] = [];}
        selectedFilters[this.name].push(this.value);});

        var $filteredResults = $('.flower');
        $.each(selectedFilters, function(name, filterValues) {
                $filteredResults = $filteredResults.filter(function() {
                var matched = false,
                currentFilterValues = $(this).data('category').split(' ');
                $.each(currentFilterValues, function(_, currentFilterValue) {
               if ($.inArray(currentFilterValue, filterValues) != -1) {
               matched = true;
               return false;}
               });
       return matched;
       });
});

$('.flower').hide().filter($filteredResults).show();
});
</script>

所以我只需要通过FORM-FACTOR或TYPES过滤显示已检查的产品（使用按钮＆＃34;搜索＆＃34;）

你能帮助我使用iCheck吗？

iCheck js阻止我的js搜索复选框过滤（jQuery）

0 个答案: