web-dev-qa-db-fra.com

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

Dans mes cms, j'ai un groupe de cases à cocher pour les catégories. Je voudrais avoir une entrée de texte en dessous de celle où l'utilisateur peut entrer le nom d'une nouvelle catégorie et il ajoutera dynamiquement une nouvelle case à cocher avec le nom fourni utilisé à la fois pour la valeur et l'étiquette.

Comment puis-je faire ceci?

jquerydynamiccheckbox
30
Martin Reeves
<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>
76
David Hedlund

Lors de la conception de votre interface, l'un des éléments à prendre en compte est sur quel événement (lorsque A se produit, B se produit ...) la nouvelle case à cocher finit-elle par être ajoutée?

Disons qu'il y a un bouton à côté de la zone de texte. Lorsque le bouton est cliqué, la valeur de la zone de texte est transformée 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>

Sur la base de ce balisage, votre jquery pourrait se lier à l'événement click du bouton et manipuler le DOM.

$('#addCheckbox').click(function() {
    var text = $('#newCheckText').val();
    $('#checkboxes').append('<input type="checkbox" /> ' + text + '<br />');
});
5
T. Stone

Mettez 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>
3
rahul