I'm trying to Show/Hide Multiple Rows in Internet Explorer. Not happening.

Question

jonsan32 12 Junior Poster in Training

11 Years Ago

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>

javascript

3 Contributors
9 Replies
717 Views
1 Day Discussion Span
Latest Post 11 Years Ago Latest Post by Airshow

pritaeas 2,194 ¯\_(ツ)_/¯

11 Years Ago

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.

Airshow 416 WiFi Lounge Lizard

11 Years Ago

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

Airshow 416 WiFi Lounge Lizard

11 Years Ago

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

Reply to this topic

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.

jonsan32 12 Junior Poster in Training · Answer 1 · 2012-12-17T17:27:57+00:00

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

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 2 · 2012-12-17T20:54:42+00:00

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

jonsan32 12 Junior Poster in Training · Answer 3 · 2012-12-17T21:15:46+00:00

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>

jonsan32 12 Junior Poster in Training · Answer 4 · 2012-12-18T04:28:55+00:00

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>

jonsan32 12 Junior Poster in Training · Answer 5 · 2012-12-18T06:42:01+00:00

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!

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2012-12-18T11:30:19+00:00

Airshow 416 WiFi Lounge Lizard

11 Years Ago

Jon, the pleasure is all mine.

Airshow