Ich habe eine Liste von Ereignissen, diese Ereignisse sind jeweils von einem bestimmten Typ und beginnen in einem bestimmten Monat. Ich habe eine Checkbox-Gruppe für Typen und eine für Monate. Was ich versuche, ist, die Checkboxen zu benutzen, um die Liste zu filtern. Ich habe es funktioniert mit einer Gruppe, aber kann nicht scheinen, dass es mit zwei funktioniert.jQuery mehrere Kontrollkästchen Filter
Grundsätzlich versuche ich eine Klasse zu setzen, wenn ich das Listenelement verstecke, also weiß ich, welche Gruppe es versteckt hat, aber es scheint verwirrt zu werden. Die Klassennamen sind korrekt, aber manchmal werden Elemente manchmal nicht mehr angezeigt.
Wenn jemand sehen kann, was ich falsch mache, oder denke an eine bessere Lösung, die großartig wäre! Vielen Dank!
Darren.
Mein JavaScript:
$("#options input.type_check").change(function() {
if($(this).is(':checked')) {
$("#events li."+$(this).attr('id')).removeClass('type_hidden');
if(!$("#events li."+$(this).attr('id')).hasClass('start_hidden')) {
$("#events li."+$(this).attr('id')).slideDown();
}
} else {
$("#events li."+$(this).attr('id')).addClass('type_hidden');
$("#events li."+$(this).attr('id')).slideUp();
}
return false;
});
$("#options input.start_check").change(function() {
if($(this).is(':checked')) {
$("#events li."+$(this).attr('id')).removeClass('start_hidden');
if(!$("#events li."+$(this).attr('id')).hasClass('type_hidden')) {
$("#events li."+$(this).attr('id')).slideDown();
}
} else {
$("#events li."+$(this).attr('id')).addClass('start_hidden');
$("#events li."+$(this).attr('id')).slideUp();
}
return false;
});
Mein HTML:
<p>Types:</p>
<div><input name="type[]" type="checkbox" id="type_0" value="0" class="type_check" checked="checked" /><label for="type_0">Type 0</label></div>
<div><input name="type[]" type="checkbox" id="type_1" value="1" class="type_check" checked="checked" /><label for="type_1">Type 1</label></div>
<div><input name="type[]" type="checkbox" id="type_2" value="2" class="type_check" checked="checked" /><label for="type_2">Type 2</label></div>
<div><input name="type[]" type="checkbox" id="type_3" value="3" class="type_check" checked="checked" /><label for="type_3">Type 3</label></div>
<div><input name="type[]" type="checkbox" id="type_4" value="4" class="type_check" checked="checked" /><label for="type_4">Type 4</label></div>
<p>Starts:</p>
<div><input name="start[]" type="checkbox" id="start_072009" value="072009" class="start_check" checked="checked" /><label for="type_072009">July 2009</label></div>
<div><input name="start[]" type="checkbox" id="start_082009" value="082009" class="start_check" checked="checked" /><label for="type_082009">August 2009</label></div>
<div><input name="start[]" type="checkbox" id="start_092009" value="092009" class="start_check" checked="checked" /><label for="type_092009">September 2009</label></div>
<div><input name="start[]" type="checkbox" id="start_102009" value="102009" class="start_check" checked="checked" /><label for="type_102009">October 2009</label></div>
<p>Events</p>
<ul id="events">
<li id="1768" class="type_0 start_072009">Event 1</li>
<li id="2190" class="type_1 start_072009">Event 2</li>
<li id="2191" class="type_2 start_072009">Event 3</li>
<li id="1864" class="type_2 start_082009">Event 4</li>
<li id="1679" class="type_3 start_082009">Event 5</li>
<li id="2042" class="type_0 start_092009">Event 6</li>
<li id="1717" class="type_4 start_092009">Event 7</li>
<li id="1917" class="type_4 start_092009">Event 8</li>
<li id="1767" class="type_4 start_092009">Event 9</li>
<li id="1866" class="type_2 start_102009">Event 10</li>
</ul>
Wie sieht Ihr CSS aus? –
Es gibt kein CSS, siehe Beispiel unten. – iamdarrenhall