Slt lé bro c lrb

<style>
.bloc {float:left;margin:10px; text-align:center;}
.bloc > div {border:1px solid black;width:200px;}
.titre {background-color:lightgrey;height:30px;}
.contenu{height:270px;}
#modeles{display:none;}
#listeItems{height: 100px;
overflow: scroll}
</style>

<script src="jquery.js"></script>
<script>

function mkbloc(id) {
    // instancier un nouveau bloc dans la page
    var jBloc = $("#modeleBloc").clone();

    if (id != undefined)    jBloc.attr("id",id);
    else jBloc.removeAttr("id");

    $("body").append(jBloc);

    return jBloc;
}

// Au début du chargement de la page, on prépare des "composants" avec leur forme et leurs interactions, que l'on clonera suivant les besoins
// => à faire dans $(document).ready

function choixListe(jBloc) {
    // Initialiser l'interface de choix de liste
    // Dans le bloc considéré
    var jForm = $("#modeleChoixListe").clone(true);
    // true permet de cloner aussi les ges. d'evnt.
    $(".titre",jBloc).html("Choix Liste");
    $(".contenu",jBloc).html(jForm.html());


    $(".btnChoixListe", jBloc).click(function(){
        // recup option sélectionnée
        var meta = $("option:selected",jBloc).data();
        if (meta == undefined) return;
        // il n'y a aucune option sélectionnée

        listerItems(jBloc,meta);
    });

    $.getJSON(  "data.php",
                            {   "action":"getListes"},
                            function (oRep){
        // oRep.listes :[{"id":"1","idCreateur":"1","theme":"..."}
        var i;
        for(i=0;i<oRep.listes.length; i++) {
            // préparation option avec ses méta-données
            var nextO = $("<option>")
                                        .html(oRep.listes[i].theme)
                                        .data(oRep.listes[i]);
            // insertion dans menu déroulant
            $("select", jBloc).append(nextO);
        }
    });

}



function listerItems(jBloc,meta){
    var jForm = $("#modeleItems").clone();
    $(".titre",jBloc).html(meta.theme);
    $(".contenu",jBloc).html(jForm.html());


        $.getJSON(  "data.php",
                            {   "action":"getItems","idListe":meta.id},
                            function (oRep){

            var i,check = '';
            for (i=0;i<oRep.items.length;i++) {
                if (oRep.items[i].checked==1)
                    check = "<input type='checkbox' id=" +oRep.items[i].id +" checked class='checkbox'>";
                else check = "<input type='checkbox' id=" + oRep.items[i].id +" class='checkbox'>";

                var item = $("<li>")
                                        .html(oRep.items[i].label + check)
                                        .data(oRep.items[i]);



                    $("ul", jBloc).append(item);
            }
});

$(".checkbox").click(function(){

    var id = $(this).attr('id');
    console.log("hello");

 //($('#checkbox').attr('checked')) ou (this).checked
     if($('#checkbox').attr('checked')){

    $.getJSON(  "data.php",
                            {   "action":"unCheckItem","idItem":id},listerItems(jBloc,meta));

}
});
}
function initBloc(jBloc) {
    // insérer un form de conn. dans le bloc
    var jForm = $("#modeleFormConnexion").clone();
    $(".titre",jBloc).html("Connexion");
    $(".contenu",jBloc).html(jForm.html());


    // comportement du bouton "Se connecter"
    $(".btnConnexion",jBloc).click(function(){
        // envoyer un req. ajax vers data.php?action=connexion...
        //  &login=?? &passe=??
        // ATTENTION : nous sommes ici dans une fonction de rappel
        // Déclenchée BIEN APRES la FIN de la fonction initBloc
        // La création de cette fonction a "enfermé"
        // dans son scope les variables jForm et jBloc
        // correspondant AU BLOC qui vient d'être créé

        var login = $("input[type=text]",jBloc).val();
        var passe = $("input[type='password']",jBloc).val();

        $.getJSON("data.php",
                                {   "action":"connexion",
                                    "login":login,
                                    "passe":passe
                                }, function (oRep){
            // fn callback rappelée lors de la rép. du serveur
            // oRep est la réponse structurée en JSON
            if(!oRep.connecte) {
                // echec de l'identification
                // on affiche un message
                console.log("erreur");
                $(".message",jBloc).html("Connexion refusee");
            }
            else {
                choixListe(jBloc);
            }  // fin if (connecte)
        }); // fin getJSON
    }); // fin clic
} // fin initBloc



$(document).ready(function(){
        var b1 = mkbloc(1);
        var b2 = mkbloc(2);
        var b3 = mkbloc();
        initBloc(b2);
        initBloc(b1);



});
</script>
<body>

<div id="modeles">
    <div class="bloc" id="modeleBloc">
        <div class="titre">Titre</div>
        <div class="contenu">Contenu</div>
    </div>

    <div id="modeleFormConnexion">
        <div class="message"></div>
        login: <br/> <input type="text" /> <br />
        passe: <br/> <input type="password" /> <br />
        <input class="btnConnexion"
                        type="button" value="Se connecter"/>
    </div>

    <div id="modeleChoixListe">
        Mes listes : <br />
        <select></select> <br />
        <input class="btnChoixListe"
                        type="button" value="Selectionner"/>
    </div>



    <div id="modeleItems">
        Mes items : </br></br>
        <ul id="listeItems">
        </ul>
    </div>

</div>

</body>