Jquery: Ajout de plusieurs valeurs dans les zones de texte (deuxième round)

Question

Je ne pense pas que je me suis expliqué de mon mieux last time, donc je vais essayer de nouveau. À partir du code ci-dessous:

<div id="addons" class="grid_12 omega"> 
    <div class="addon"> 
     <span><input type="checkbox" name="addon_1" value="addon_1"></span> 
     <span class="title">Title 1 here</span> 
     <span class="cost">$<em>49</em></span> 
     <p>Some text here</p> 
    </div> 
    <div class="addon"> 
     <span><input type="checkbox" name="addon_2" value="addon_2"></span> 
     <span class="title">Title 2 here also</span> 
     <span class="cost">$<em>95</em></span> 
     <p>Some more text.</p> 
    </div> 
    <div id="summaries" class="hidden"> 
     <input type="button" id="totalme" name="totalme"> 
     <input type="text" value="" id="addons_titles" name="addons_titles"><!-- item titles array, from addons that are checked --> 
     <input type="text" value="" id="addons_cost" name="addons_cost"><!-- total cost, from addons that are checked --> 
    </div> 
</div> 

Pour tous "entrée [type = case] [vérifié]" (addons vérifié), je suis en train de:

• résumer les titres de ".addon entrée de [nom] "à entrée # addons_titles (chaque séparées par des tuyaux - par exemple: "article 1 titre | article 2 titre")
• et les coûts de poste au total" .addon .cost em "à entrée # addons_cost

Je pense que le code donné précédemment par Obalix et Nick Craver sont sur la marque, je ne suis pas sûr de savoir comment le modifier seulement le faire pour addons sélectionnés.

Aussi je ne sais pas comment déclencher cela. Je suppose que je devrais courir ceci sur un bouton de soumission ainsi le tableau est seulement créé une fois - autrement les titres pourraient être continuellement ajoutés à un tableau toujours dupliqué?

Appréciez vos pensées.

Answer 1

Je pense que votre question est plus claire maintenant.

Cela fonctionne pour vos besoins:

$('#totalme').click(function() { 
    var items = $('input:checkbox:checked'), // checked elements 
     titles = [], // store the selected titles 
     totalCost = 0; // store the total cost 

    items.each(function() { // iterate over the checked elements 
    var addon = $(this).closest('div.addon'), // get the closest div.addon 
     title = $('span.title', addon).text(), // get title 
     cost = +$('span.cost em', addon).text(); // get cost coerced to number 

    titles.push(title); // add the title 
    totalCost += cost; // add the cost to sumarize 
    }); 

    $('#addons_titles').val(titles.join('|'));//join all titles with | as separator 
    $('#addons_cost').val(totalCost); // show the amout 

}); 

Vérifiez un exemple en direct here.