Comment faire multi select Checkbox ou Listview dans Jquery Mobile par tableau d'ID et de nom

Je développe dans Jquery Mobile, et je veux montrer la liste des personnes et hors d'entre eux je veux sélectionner certaines personnes et les enregistrer dans la base de données . Comment vais-je montrer la liste avec la sélection multiple?Comment faire multi select Checkbox ou Listview dans Jquery Mobile par tableau d'ID et de nom

Source

2012-01-07 Moiz Kachwala

Hey, pouvez-vous développer un peu plus, vous voulez dire que vous voulez créer HTML cases à cocher avec une liste de personnes à choisir , et celui qui est sélectionné est stocké dans la base de données? –

Je reçois la liste des gens par JSON et c'est dans le tableau. et je veux montrer cela dans listview ou checkbox afin que l'utilisateur puisse sélectionner certaines personnes de la liste. et tout en l'enregistrant sera sauvegardé dans la base de données. –

Voici un petit exemple.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 

    <script> 
     var array = [{ name: "John", value: "1"}, { name: "Alex", value: "2"},{ name: "John2", value: "3"}, { name: "Alex2", value: "4"}]; 

     function createCheckboxes(){ 
     $("#createBtn").remove(); 
     $("#content").append('<fieldset id="cbFieldSet" data-role="controlgroup">'); 
     var length = array.length; 
     for(var i=0;i<length;i++){ 
      $("#cbFieldSet").append('<input type="checkbox" name="cb-'+i+'" id="cb-'+i+'" value="'+array[i].name+'"/><label for="cb-'+i+'">'+array[i].name+'</label>'); 
     } 

     $("#content").trigger("create"); 
     $("#showBtn").css("visibility","visible"); 
     } 

     function showSelectedNames(){ 
      var count = $("#cbFieldSet input:checked").length; 
      var str = ''; 
      for(i=0;i<count;i++){ 
       str += ' '+$("#cbFieldSet input:checked")[i].value; 
      } 
      alert("You selected----"+str); 
     } 
    </script> 
</head> 
<body> 

<div data-role="page" id="page1"> 

    <div data-role="header"> 
     <h1>Page1</h1> 
    </div><!-- /header --> 

    <div data-role="content" id="content">  
     <a id="createBtn" data-role="button" onclick="createCheckboxes()">Create checkbox list from array</a> 
     <a id="showBtn" data-role="button" onclick="showSelectedNames()" style="visibility:hidden">Alert selected names</a>  
    </div><!-- /content --> 

</div><!-- /page --> 

</body> 
</html>

Une démo ici - http://jsfiddle.net/DqqK8/

Laissez-moi savoir si cela aide

Source

2012-01-07 16:39:11 user700284

Merci beaucoup pour votre réponse .. Son fonctionnement bien .. –

Heureux d'être de l'aide.S'il vous plaît marquer la réponse comme correcte . – user700284

Vous pouvez donc écrire une fonction pour analyser la liste que vous avez et sortir les cases à cocher html, le tout avec un nom comme:

< input type='checkbox' name='persons[]' value='jb' /> John Brown 
< input type='checkbox' name='persons[]' value='ts' /> Tim Slim

Ensuite, dans votre script côté serveur, par exemple si les deux cases à cocher sont cochées recevoir un tableau comme

persons("0" => "jb", "1"=>"ts")

Vous pouvez ensuite valider à partir de là et stocker dans votre base de données. Donc, si vous avez var gens = [{nom: Jean, valeur: 1}, {nom: Alex, valeur: 2}];

passer par le tableau comme:

for(person in people) 
{ 
    output "<input type='checkbox' name='people[]' value='person[value]'>person[name]"; 
}

Hope this résout votre problème

Source

2012-01-07 06:04:13

J'ai un tableau comme var array = [{ ] nom: John, valeur: 1}, { nom: Alex, valeur: 2}]; et maintenant comment puis-je définir ce tableau dans la case à cocher ou la vue de la liste de sorte que peut sélectionner plusieurs personnes? –

parcourir le tableau comme: pour() {sortie " nom";} –

var array = [{nom: John, valeur: 1 }, {nom: Alex, valeur: 2}]; pour (personnes tableau) { // chkDIv est le nom de la div $ ("# chkDIv"). Append (" array [nom] "); } Tu veux dire ça? mais cela ne fonctionne pas –

Comment faire multi select Checkbox ou Listview dans Jquery Mobile par tableau d'ID et de nom

Répondre

Questions connexes