All Day All Day - 1 year ago 65
jQuery Question

JQuery Confusion

Il trying to filter Events on a calendar using check boxes and JQuery,

$(document).ready(function () {
$('.scrollable-menu :checkbox').click(function (){
if ($('input:checkbox:checked').length) {

This is what i have upto now, i know its not much. This works fine but from here i need it to some how select the li.alerts which have certain background colors

$('div[style~="backgroundColor: red;"]').show()

but every event has a different background colour so this needs to change some how i have stored the color in the name of the check boxes. I also need the script to allow more than one checkbox selected at the same time

{% for category in categories %}
<li name="{{category.color}}"><input name="{{category.color}}" value="your_value" type="checkbox"><div style="color:#{{category.color}};">{{ }}{{ category.color }}</div></li>
{% endfor %}

Answer Source

Instead of selecting by CSS style (what if you change color?) apply some specific classes to elements and use them.

$('.meetings, .jobs').show();

Example of using classes for filtering:

$(document).ready(function() {
  $('input[type="checkbox"]').change(function() {
    var filters = $('input[type="checkbox"]:checked');

    if (filters.length) {
      $('input[type="checkbox"]:checked').each(function() {
        $('.event.' + $(this).data('type')).show();
    } else {
.job {
  color: red;
.meeting {
  color: blue;
.job.meeting {
  color: green;
<script src=""></script>
<div class="event meeting job">Job Meeting</div>
<div class="event job">Important job</div>
<div class="event meeting">Meeting with client</div>
<div class="event call">Call to client</div>
  <input type="checkbox" data-type="job" />Jobs
  <input type="checkbox" data-type="call" />Calls
  <input type="checkbox" data-type="meeting" />Meetings