Question

这么多支票，但这是我现在正在处理的一个问题。基本上我的标记中有几个复选框：

<input id="only_veggi" type="checkbox" name="ingredients" value="showveggi"> only vegetarian <br>
<input id="show_15min" type="checkbox" name="time" value="15min" style="margin-left: -59px;"> 15min <br>
<input id="show_28min" type="checkbox" name="time" value="28min" style="margin-left: -59px;"> 28min <br> 
<input id="show_45min" type="checkbox" name="time" value="45min" style="margin-left: -59px;"> 45min <br> 
<input id="show_60min" type="checkbox" name="time" value="60min" style="margin-left: -59px;"> 60min <br><br>

并根据该检查触发一个函数：

jQuery('#show_15min').click(function(){
   if (this.checked) {
      jQuery('#content_container').isotope({ filter: '.fifteen' });
    }

   if (!this.checked) {
      jQuery('#content_container').isotope({ filter: '.twentyeight, .fourtyfive, .sixty' });
   }
});

但我还要检查哪些其他复选框已选中和取消选中，并且根据此情况，我必须更改同位素过滤器中的class es。当然，我可以制作很多if语句，如

if(!this.checked && !jQuery('#show_45min').checked && jQuery('#show_60min').checked)
      jQuery('#content_container').isotope({ filter: '.sixty', '.fifteen');
{

但这不是解决方案。

有没有人知道在检查和取消选中它们时如何通过所有复选框，并根据状态更改同位素的过滤器class。

我希望我能说清楚。

提前致谢。

Answer 1

您可以对其进行设置，以便每次单击该类的任何复选框时，它都会构建一个包含所有选定项目的列表。

<强> HTML

<input id="only_veggi" type="checkbox" name="ingredients" value="showveggi"> only vegetarian <br>
<input class="time" id="show_15min" type="checkbox" name="time" value="15min" style="margin-left: -59px;"> 15min <br>
<input class="time" id="show_28min" type="checkbox" name="time" value="28min" style="margin-left: -59px;"> 28min <br> 
<input class="time" id="show_45min" type="checkbox" name="time" value="45min" style="margin-left: -59px;"> 45min <br> 
<input class="time" id="show_60min" type="checkbox" name="time" value="60min" style="margin-left: -59px;"> 60min <br><br>

<强>的Javascript

var timeClassLookup = {
   show_15min: '.fifteen',
   show_28min: '.twentyeight',
   show_45min: '.fortyfive',
   show_60min: '.sixty'
};

$('.time').click(function() {
   var classes = [];
   var $checkedBoxes = $('.time:checked');
   $checkedBoxes.each(function () {
      var checkboxId = $(this).attr('id');
      classes.push(timeClassLookup[checkboxId]);
   });

   $('#content_container').isotope({ filter: classes.join(', ') });
});

呼叫功能取决于检查和检查其他复选框

1 个答案: