Is there any way to get this to work in Internet Explorer? It shows/hides multiple rows in every other browser, but will only show one class's row in IE. Any help would be great. Here's the code. Thanks!

<style type="text/css">

li.merk {
list-style:none;
display: block; width: 925px;
padding:8px;
margin-top:-20px;
}

.jamactive {  
 width: auto;
 padding: 6px 11px;
 background: #0066CC;
 border: solid 1px #000099;
  font: 12px/100% Tahoma;
font-weight: 500;
letter-spacing:2px;
 color: #ffffff;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}

.jamactive:hover
{ 
background-color: #000099;
 border: solid 1px #000066;}

.jaminactive {  width: auto;
 padding: 6px 10px;
 background: #666666;
 border: solid 1px #000000;
  font: 12px/100% Tahoma;
font-weight: 500;
 color: #cccccc;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}

.jaminactive:hover
{ 
color: #ffffff;
}


.jamactive:hover
{ 
background-color: #000099;
 border: solid 1px #000066;}

.jamdate {  width: auto;
position: relative;
 padding: 3px 4px;
 background: #FFFFCC;
 border: solid 1px #888;
  font: 11px/100% Tahoma;
font-weight: 500;
 color: #222222;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}


.leagueback {  width: auto;
 padding: 3px 4px;
position: relative;
 background: #990000;
letter-spacing:1px;
 border: solid 1px #000000;
  font: 12px/100% Tahoma;
font-weight: 500;
 color: #ffffff;
text-transform:uppercase;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}


.tournyback {  width: auto;
 padding: 3px 4px;
position: relative;
 background: #000055;
letter-spacing:1px;
 border: solid 1px #000000;
  font: 12px/100% Tahoma;
font-weight: 500;
 color: #ffffff;
text-transform:uppercase;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}


.teamback {  width: auto;
 padding: 3px 4px;
position: relative;
 background: #666666;
letter-spacing:1px;
 border: solid 1px #000000;
  font: 12px/100% Tahoma;
font-weight: 500;
 color: #ffffff;
text-transform:uppercase;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}




.campback {  width: auto;
 padding: 3px 4px;
position: relative;
 background: #333333;
letter-spacing:1px;
 border: solid 1px #000000;
  font: 12px/100% Tahoma;
font-weight: 500;
 color: #ffffff;
text-transform:uppercase;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}



.clinicback {  width: auto;
 padding: 3px 4px;
position: relative;
 background: #000000;
letter-spacing:1px;
 border: solid 1px #000000;
  font: 12px/100% Tahoma;
font-weight: 500;
 color: #ffffff;
text-transform:uppercase;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}









</style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.brand').on('change',function() {

        $checked = $('.brand:checked'); //perform selection only once

        if ($checked.length){ //checks if there are checked elements at all
           $('.merk').hide(); //hide all
           $checked.each(function(){
               $('li#m_' + $(this).attr('id') + '').show(); //show only the items with corresponding checkboxes
           });
        } else { //no checked elements
           $('.merk').show(); //show all
        }

    });
});//]]>  

</script>



<center>
<table width=925><tr><td align="left">


<center>
<span  style="background-color:#990000; color:white; text-transform:uppercase; font-size:13px; font-weight: bold; border: 2px solid black; padding:7px; text-decoration:none; position: relative;"><input type="checkbox" class="brand" id="LEAGUES" />LEAGUES</span>

<span  style="background-color:#000055; color:white; text-transform:uppercase; font-size:13px; font-weight: bold; border: 2px solid black; padding:7px; text-decoration:none; position: relative;"><input type="checkbox" class="brand" id="TOURNAMENTS" />TOURNAMENTS</span>

<span  style="background-color:#666666; color:white; text-transform:uppercase; font-size:13px; font-weight: bold; border: 2px solid black; padding:7px; text-decoration:none; position: relative;"><input type="checkbox" class="brand" id="TEAMS" />TEAMS</span>

<span  style="background-color:#333333; color:white; text-transform:uppercase; font-size:13px; font-weight: bold; border: 2px solid black; padding:7px; text-decoration:none; position: relative;"><input type="checkbox" class="brand" id="CAMPS" />CAMPS</span>

<span  style="background-color:#000000; color:white; text-transform:uppercase; font-size:13px; font-weight: bold; border: 2px solid black; padding:7px; text-decoration:none; position: relative;"><input type="checkbox" class="brand" id="CLINICS" />CLINICS</span>
</center>
<br /><br />


<li class="merk" id="m_CLINICS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">1/11/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="clinicback">Clinic @ This Location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>



<li class="merk" id="m_TOURNAMENTS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">1/18/14 - 1/19/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="tournyback">Tournament at this location (for these ages)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr></table>
</li>




<li class="merk" id="m_CAMPS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">2/1/14 - 2/2/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="campback">Camp at this location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr></table>
</li>



<li class="merk" id="m_CLINICS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">2/8/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="clinicback">Clinic @ This Location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>



<li class="merk" id="m_TOURNAMENTS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">3/8/14 - 3/9/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="tournyback">Tournament at this location (for these ages)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr></table>
</li>



<li class="merk" id="m_CLINICS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">3/15/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="clinicback">Clinic @ This Location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>


<li class="merk" id="m_TEAMS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">3/16/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="teamback">Tryout @ This Location (for these ages)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>


<li class="merk" id="m_CAMPS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">3/22/14 - 3/23/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="campback">Camp at this location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr></table>
</li>


<li class="merk" id="m_LEAGUES">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">4/1/14 - 5/20/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="leagueback">League during this span (for these ages)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>


<li class="merk" id="m_CLINICS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">5/24/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="clinicback">Clinic @ This Location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>


<li class="merk" id="m_CAMPS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">5/26/14 - 5/29/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="campback">Camp at this location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr></table>
</li>



<li class="merk" id="m_CLINICS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">5/31/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="clinicback">Clinic @ This Location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>



<li class="merk" id="m_TOURNAMENTS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">6/14/14 - 6/15/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="tournyback">Tournament at this location (for these ages)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr></table>
</li>


<li class="merk" id="m_CLINICS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">6/28/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="clinicback">Clinic @ This Location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>


<li class="merk" id="m_CAMPS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">7/7/14 - 7/10/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="campback">Camp at this location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr></table>
</li>




<li class="merk" id="m_CLINICS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">8/2/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="clinicback">Clinic @ This Location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>


<li class="merk" id="m_TEAMS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">8/3/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="teamback">Tryout @ This Location (for these ages)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>



<li class="merk" id="m_CLINICS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">8/9/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="clinicback">Clinic @ This Location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>



<li class="merk" id="m_TOURNAMENTS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">8/16/14 - 8/17/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="tournyback">Tournament at this location (for these ages)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr></table>
</li>


<li class="merk" id="m_CLINICS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">8/23/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="clinicback">Clinic @ This Location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>


<li class="merk" id="m_LEAGUES">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">9/1/14 - 10/20/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="leagueback">League during this span (for these ages)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>




<li class="merk" id="m_TOURNAMENTS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">10/25/14 - 10/26/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="tournyback">Tournament at this location (for these ages)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr></table>
</li>



<li class="merk" id="m_CAMPS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">11/8/14 - 11/9/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="campback">Camp at this location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr></table>
</li>


<li class="merk" id="m_CLINICS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">11/15/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="clinicback">Clinic @ This Location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>


<li class="merk" id="m_CLINICS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">11/29/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="clinicback">Clinic @ This Location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>



<li class="merk" id="m_TOURNAMENTS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">12/7/14 - 12/8/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="tournyback">Tournament at this location (for these ages)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr></table>
</li>




<li class="merk" id="m_CLINICS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">12/14/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="clinicback">Clinic @ This Location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr></table>
</li>



<li class="merk" id="m_CAMPS">
<table width=100%><tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">12/16/14 - 12/19/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="campback">Camp at this location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr></table>
</li>




</td></tr></table></center>

Recommended Answers

All 9 Replies

Do you have html/head/body tags (they are not in your pasted code)? IE is known to mess up when the HTML is invalid.

Yea, I have those on the site. Sorry for not pasting them here. I appreciate your response and attempt.

It's a little long to wade through. Can you reproduce the problem with a shorter version of the above?

Yes. My apologies.

I want the calendar on this page: http://www.jamball.com/
to behave like the object on this page instead: http://jsfiddle.net/PbZRF/27/
I want all to show onload, then the first thing I click should be the only class I see, then the toggles should behave normally.

The differences in the code are as follow:

**Here's the code that works, but hides the first thing clicked: **

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" language="javascript">
$(function(){
var $rowSelectors = $("#controls input.rowSelector");
var $eventRows = $("tbody#eventsList tr");
function setStripes(){
$eventRows.not(":hidden").removeClass('stripe1').addClass('stripe0').filter(":odd").removeClass('stripe0').addClass('stripe1');
}
$rowSelectors.click(function(){
$rowSelectors.each(function(){
var fn = this.checked ? 'show' : 'hide';
$eventRows.filter("." + this.value)[fn]();
setStripes();
});
});
$("#massControls a").click(function(){
$rowSelectors.attr('checked', (this.name==='1')?true:false).eq(0).triggerHandler('click');
}).eq(0).click();//change to .eq(1).click() for initially [all off]
});
</script>

And here's what I would like to mesh with the code above, which I found at this url: http://jsfiddle.net/PbZRF/27/

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.brand').on('change',function() {
$checked = $('.brand:checked'); //perform selection only once
if ($checked.length){ //checks if there are checked elements at all
$('.merk').hide(); //hide all
$checked.each(function(){
$('li#m_' + $(this).attr('id') + '').show(); //show only the items with corresponding checkboxes
});
} else { //no checked elements
$('.merk').show(); //show all
}
});
});//]]> 
</script>

Hi Jonsan,

I think the problem here is repeated ids, and can be fixed by using classes instead.

Try changing all the LI elements from :

<li class="merk" id="m_CLINICS">

to :

<li class="merk m_CLINICS">

The corresponding javascript will be as follows :

$(function() {
    $('.brand').on('change', function() {
        var $checked = $('.brand:checked'); //perform selection only once
        var $merk = $('.merk');
        if ($checked.length) { //checks if there are checked elements at all
            $merk.hide(); //hide all
            $checked.each(function() {
                $merk.filter('m_.' + $(this).attr('id')).show(); //show "merk" items for which the corresponding checkbox is checked.
            });
        }
        else { //no checked elements
            $merk.show(); //show all
        }
    });
});

Airshow

Hey man, I did what you said and it's still a no-go... but now in ay browser. I think the confusion lies in my application of the checkboxes. id versus class versus putting an m_ before some it???

I've pasted that part below, but let me know if you need the entire code. Thanks a ton for your help as always. You're the best.

<center>
<table width=925><tr><td align="left">
<center>
<span  style="background-color:#990000; color:white; text-transform:uppercase; font-size:13px; font-weight: bold; border: 2px solid black; padding:7px; text-decoration:none; position: relative;"><input type="checkbox" class="brand" id="LEAGUES" />LEAGUES</span>
<span  style="background-color:#000055; color:white; text-transform:uppercase; font-size:13px; font-weight: bold; border: 2px solid black; padding:7px; text-decoration:none; position: relative;"><input type="checkbox" class="brand" id="TOURNAMENTS" />TOURNAMENTS</span>
<span  style="background-color:#666666; color:white; text-transform:uppercase; font-size:13px; font-weight: bold; border: 2px solid black; padding:7px; text-decoration:none; position: relative;"><input type="checkbox" class="brand" id="TEAMS" />TEAMS</span>
<span  style="background-color:#333333; color:white; text-transform:uppercase; font-size:13px; font-weight: bold; border: 2px solid black; padding:7px; text-decoration:none; position: relative;"><input type="checkbox" class="brand" id="CAMPS" />CAMPS</span>
<span  style="background-color:#000000; color:white; text-transform:uppercase; font-size:13px; font-weight: bold; border: 2px solid black; padding:7px; text-decoration:none; position: relative;"><input type="checkbox" class="brand" id="merk m_CLINICS" />CLINICS</span> 
</center>

Jon, I put a . in the wrong place.

replace :

$merk.filter('m_.' + $(this).attr('id')).show();

with :

$merk.filter('.m_' + $(this).attr('id')).show();

Checkbox ids should be :

  • id="TOURNAMENTS"
  • id="TEAMS"
  • id="CAMPS"
  • id="CLINICS"

LI classes should be :

  • class="merk m_TOURNAMENTS"
  • class="merk m_TEAMS"
  • class="merk m_CAMPS"
  • class="merk m_CLINICS"

Airshow

As always, you prove your genius. Thank you so kindly! I'm pretty good at basketball and at teaching the sport I love, but I think my business would be much, much less without your involvement over these past couple of years. If I randomly ever start making tons of money, I will definitely be making a donation to whatever paypal-driven site you might have. Much appreciated!

Jon, the pleasure is all mine.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.