I am trying to use checkboxes to filter a group of DIV elements based on their class. The example below works but I am looking for a better solution.The code below uses the form plugin.
This works.... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/ > <script type='text/javascript' src='../include/js/jquery-1.2.3.js? ver=1.2.3'></script> <script type='text/javascript' src='../include/js/ jquery.form.js'></script> <script type="text/javascript"> $(function(){ $('#filterButton').click(function(){ var vars = $('#filterForm input:checkbox').fieldValue(); $.each(vars, function() { if(this == "m1") { $('#sidebar').find('div.m1').hide('slow'); }; if(this == "m2") { $('#sidebar').find('div.m2').hide('slow'); }; if(this == "m3") { $('#sidebar').find('div.m3').hide('slow'); }; if(this == "m4") { $('#sidebar').find('div.m4').hide('slow'); }; }); }); }); </script> </head> <body> <div id="sidebar"> <div class="m1"> 1A </div> <div class="m2"> 2B </div> <div class="m2"> 2C </div> <div class="m3"> 3D </div> <div class="m3"> 3E </div> <div class="m1"> 1F </div> <div class="m1"> 1G </div> </div> <form id="filterForm" action=""> <label>Filter Type:</label> <input type="checkbox" name="cb" value="m1">1 <input type="checkbox" name="cb" value="m2">2 <input type="checkbox" name="cb" value="m3">3 <button type="button" id="filterButton">Filter</button> </form> </body> </html> But this does not ... $(function(){ $('#filterButton').click(function(){ var vars = $('#filterForm input:checkbox').fieldValue(); for (i=0;i<vars.length;i++) { $('#sidebar').find(vars[i]).hide('slow'); } }); }); I'm new to Jquery - it looks like the second approach should work. Thanks
