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

Question

jonsan32 12 Junior Poster in Training

13 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
746 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Airshow

Dani AI

Generated 10 Months Ago

Root cause: the markup used repeated id values on many list items (for example multiple id="m_CLINICS"). Duplicate IDs are invalid HTML and produce undefined, inconsistent behavior across engines — jQuery/id lookups often end up resolved by native getElementById (which returns a single element), so Internet Explorer can appear to only show the first matching row while other browsers behave differently. As observed, invalid HTML is frequently the source of IE-only problems.

What fixed the thread’s issue was switching the category markers from duplicate IDs to class- or data-based attributes, and making the JS select by class/attribute instead of by an id selector. ’s class-based approach was the right direction; note the small selector mistake early in that post (the class selector must begin with a dot). Also check that checkbox ids are simple category names (no spaces, no extra text) so they map cleanly to the classes or data attributes used on the rows.

Practical checklist / debugging tips that remain useful years later:

Remove duplicate ids; every id must be unique. Use classes (or data-brand="...") to tag rows that belong to the same category.
Wrap li elements in a proper ul/ol (invalid list markup can also break behavior).
Confirm jQuery version: .on() exists from 1.7 onward; older jQuery needs .bind()/.delegate(). Use prop('checked') for checked state in jQuery 1.6+.
Batch DOM work: hide all rows once, then show the filtered set to reduce reflows. Check the IE developer console for JS errors and run the page through an HTML validator.

Small alternative pattern (uses data attributes instead of repeated ids):

<li class="merk" data-brand="clinics">...</li>

// on change: build an array of checked ids, then hide all .merk and show only matching data-brand items

That strategy avoids duplicate ids entirely, works predictably across browsers, and keeps the mapping between checkboxes and rows explicit.

All 9 Replies

pritaeas 2,276 Most Valuable Poster

13 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 425 WiFi Lounge Lizard

13 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 425 WiFi Lounge Lizard

13 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,276 Most Valuable Poster 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 425 WiFi Lounge Lizard Team Colleague · Answer 6 · 2012-12-18T11:30:19+00:00

Airshow 425 WiFi Lounge Lizard

13 Years Ago

Jon, the pleasure is all mine.

Airshow

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

Dani AI

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers