Créer dynamiquement case avec JQuery à partir de la saisie de texte

Dans mon cms, j'ai un groupe de cases à cocher pour les catégories. Je voudrais avoir une saisie de texte en dessous de laquelle l'utilisateur peut entrer le nom d'une nouvelle catégorie, et il va ajouter dynamiquement une nouvelle case à cocher avec le nom utilisé pour à la fois la valeur et l'étiquette.

Comment puis-je faire cela?

InformationsquelleAutor Martin Reeves | 2010-01-13
  1. 78
    <div id="cblist">
    <input type="checkbox" value="first checkbox" id="cb1" /> <label for="cb1">first checkbox</label>
</div>

<input type="text" id="txtName" />
<input type="button" value="ok" id="btnSave" />

<script type="text/javascript">
$(document).ready(function() {
    $('#btnSave').click(function() {
        addCheckbox($('#txtName').val());
    });
});

function addCheckbox(name) {
   var container = $('#cblist');
   var inputs = container.find('input');
   var id = inputs.length+1;

   $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
   $('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
}
</script>
    • La case à cocher est créé à la perfection (regardé le source généré à l'aide de firefox extension web developer) mais une fois le formulaire soumis avec la nouvelle case cochée, il n'est pas afficher dans la variable post. Même résultat pour les deux Safari et Firefox. Des idées? comme je suis perplexe.
    • est-il à l'intérieur de la forme? je suppose que vous avez besoin de donner les cases d'un name que je n'ai pas.
    • Après une heure de cogner ma tête contre le mur, je voudrais ce post qui a tenu la réponse. Essentiellement pour déplacer le formulaire balise d'ouverture au-dessus de l'ouverture élément div. stackoverflow.com/questions/445002/...
    • en effet. c'est ce que je voulais dire par ma question est-il à l'intérieur de la forme 😉 désolé si c'était pas clair.
    • ça m'apprendra pour quelques louches de balisage - merci encore pour votre aide
    • comment créer un maximum de 10 case à cocher dans les lignes et 5 case à cocher dans les colonnes..Après avoir atteint 10 case à cocher dans les lignes,la prochaine case doit commencer à partir de la colonne suivante..
    • eh bien, vous aurez besoin de compter les éléments déjà ajouté, et de faire les ajustements nécessaires à votre appendTo une fois que la ligne actuelle est pleine. Il ne devrait pas être très difficile, mais il est très différent de ce qui a été posée ici. Vous devriez commencer une nouvelle question. Assurez-vous de laisser les gens savent ce que vous avez essayé.
    • Votre code a fonctionné pour moi et je veux juste faire un peu de modification par la limitation de la case comme je l'ai mentionné dans mon commentaire précédent..merci je vais essayer comme vous l'avez dit..s'il vous Plaît faire un commentaire si vous avez des suggestions..
    • JSFiddle pour la démo pour voir la réponse dans l'action
    • Comment puis-je ajouter un <div class="form-cochez la case"> autour de <input> et <label> à l'aide de cette façon agréable?
    • Un autre moyen serait de définir var formCheck = $('<div/>', { 'class': 'form-check' }).appendTo(container); et puis changer l'ajout de la cible sur l'entrée et l'étiquette de container à formCheck. Notez que vous devez les guillemets autour de class de la classe est un mot clé réservé en javascript.

    InformationsquelleAutor David Hedlund
  2. 6

    L'un des éléments à prendre en compte lors de la conception de votre interface est sur ce cas (lorsqu'Un lieu, B passe...) la nouvelle case à cocher être ajouté?

    Disons qu'il y a un bouton à côté de la zone de texte. Lorsque le bouton est cliqué, la valeur de la textbox est transformé en une nouvelle case à cocher. Notre balisage pourrait ressembler à ce qui suit...

    <div id="checkboxes">
    <input type="checkbox" /> Some label<br />
    <input type="checkbox" /> Some other label<br />
</div>

<input type="text" id="newCheckText" /> <button id="addCheckbox">Add Checkbox</button>

    Basé sur ce balisage votre jquery pouvait se lier à la click cas de bouton et de manipuler le DOM.

    $('#addCheckbox').click(function() {
    var text = $('#newCheckText').val();
    $('#checkboxes').append('<input type="checkbox" /> ' + text + '<br />');
});
    • Je crois que vous avez oublié d'ajouter le value attribut
    InformationsquelleAutor T. Stone
  3. 3

    Mettre une variable globale pour générer les identifiants.

    <script>
    $(function(){
        //Variable to get ids for the checkboxes
        var idCounter=1;
        $("#btn1").click(function(){
            var val = $("#txtAdd").val();
            $("#divContainer").append ( "<label for='chk_" + idCounter + "'>" + val + "</label><input id='chk_" + idCounter + "' type='checkbox' value='" + val + "' />" );
            idCounter ++;
        });
    });
</script>
<div id='divContainer'></div>
<input type="text" id="txtAdd" /> 
<button id="btn1">Click</button>
    InformationsquelleAutor rahul