fiddler link : http://jsfiddle.net/nlxc4/5/
my code :
<html> <head> <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script type="text/javascript"> function dynamicsearch() { var val = $('#search').val(); if (val == '') val = '.'; var srch = new regexp(val, "gi"); $('.active').each(function(i, el) { if ($(this).text().match(srch)) { $(this).show(); } else { $(this).hide(); } }); } $(':checkbox').bind('change', function() { var div = this.value.replace('value', '#div'); if (this.checked) { $(div).addclass('active'); $(div).show(); } else { $(div).removeclass('active'); $(div).hide(); } }); $('#search').bind('keyup', dynamicsearch); </script> </head> <body> <form> <label for="search">search:</label> <input type="text" name="search" id="search"/> <input type="checkbox" name="modtype" value="value1" />value1 <input type="checkbox" name="modtype" value="value2" />value2 <input type="checkbox" name="modtype" value="value3" />value3 <input type="checkbox" name="modtype" value="value4" />value4 <input type="checkbox" name="modtype" value="value5" />value5 <div class="row" id="div1" style="display:none">show div 1</div> <div class="row" id="div2" style="display:none">show div 2</div> <div class="row" id="div3" style="display:none">show div 3</div> <div class="row" id="div4" style="display:none">show div 4</div> <div class="row" id="div5" style="display:none">show div 5</div> </form> </body> </html>
as can see, in fiddler, when click check box displays particular div. on home server, nothing happens. can see why might case? much.
jsfiddler, wraps js code inside $(document).ready()
if choose jquery library. that's why working there , not on server.
update following in code
$(document).ready(function() { //this $(':checkbox').bind('change', function() { var div = this.value.replace('value', '#div'); if (this.checked) { $(div).addclass('active'); $(div).show(); } else { $(div).removeclass('active'); $(div).hide(); } }); $('#search').bind('keyup', dynamicsearch); }); //and
Comments
Post a Comment