[jQuery] Filtering by multiple checkbox selection
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40"
xmlns:ns0="urn:schemas-microsoft-com:office:smarttags">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal;
font-family:Arial;
color:windowtext;}
span.EmailStyle18
{mso-style-type:personal-reply;
font-family:Arial;
color:navy;}
@page Section1
{size:612.0pt 792.0pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>Hi guys, apologies if this topic has come up before but I
couldn’t find a way to search the mailing list archives.<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>What I’m trying to do is filter a bunch of checkboxes (show /
hide them) based on the selections you make on a preceding group of checkboxes.<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>In this case I’m filtering a list of areas based on the state(s)
selected.<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>Here’s the JavaScript<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>$('.top .state input[@type="checkbox"]').click(<o:p></o:p></span></font>
<p class=MsoNormal style='text-indent:36.0pt'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>function(){<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>
$('.top .area label').not('[@class*="'+$(this).id()+'"]').not('.title').toggle();<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>
<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>
$('.top .state input[@type="checkbox"]').each(function(){<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>
if($(this).is(":checked")){<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>
$('.top .area label').filter('[@class*="'+$(this).id()+'"]').not('.title').show();<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>
}<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>
}); <o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>});<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>I check the id of the area labels to see if they contain the id of the
state that was clicked, then toggle it. This works for single selections but
goes all screwy when multiple states are selected.<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>The each loop is where I tried to check and account for multiple
selections but im not sure of my logic.<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>Thanks in advance!<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>- reyn<o:p></o:p></span></font>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/