2010-08-16 2 views
0

J'essaie de filtrer dynamiquement le contenu en utilisant les cases à cocher et jquery. Étant nouveau pour jquery, je ne suis pas sûr sur la façon de le faire correctement, donc si tout peut aider ce serait génial.Comment filtrer dynamiquement du contenu en utilisant des cases à cocher? - jQuery

J'ai obtenu ce code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script type="text/javascript" > 
     $(document).ready(function(){ 
      $("#test").change(function() 
      {  
       if ($(this).is(":checked")) 
       { 
         $("#example").hide(); 

       }else{ 
         $("#example").show(); 
       } 

      }); 
     }); 
    </script> 
</head> 
<body> 
    <input type="checkbox" id="test"/> 
    <input type="checkbox" id="test2"/> 

    <div id="example">Example</div> 
    <div id="example2">Example2</div> 
</body> 
</html> 

Je suis en train de faire en sorte que les deux cases fonctionnent de façon dynamique, ce qui signifie que je n'ai pas coder en dur l'identifiant comme dans ci-dessus, qui ne fonctionne que pour la première case à cocher. Je veux avoir plusieurs cases à cocher donc je me demandais comment faire. Est-ce que je reçois l'identifiant et je l'insère d'une manière ou d'une autre?

Toute aide serait formidable, merci.

Répondre

1

que je pourrais donner à vos cases à cocher une classe comme ceci:

<input type="checkbox" id="test" class="cb" /> 
<input type="checkbox" id="test2" class="cb"/> 

<div id="example">Example</div> 
<div id="example2">Example2</div>​​​​​​​​​​​​​​​​ 

L'utilisation que lors de la liaison et obtenir l'ID à la volée, comme ceci:

$(document).ready(function(){ 
    $(".cb").change(function() {  
    $("#" + this.id.replace('test', 'example')).toggle(this.checked); 
    }).change(); //match the initial show/hide match 
});​ 

You can give it a try here, au lieu de montrer/masquer cela utilise .toggle(bool), et nous sélectionnons l'élément <div> correspondant en transformant l'ID, en remplaçant test par example et en récupérant cet élément.

Questions connexes