Question

Assume i have the html below. What will be the way to do it the most efficiently?

The list of checkboxes can grow to many hundreds, so it is important to keep it small

<span class="text"></span>
<div class="allboxes">
  <input type="checkbox" value="a">
  <input type="checkbox" value="b">
  <input type="checkbox" value="c">
  <input type="checkbox" value="d">
</div>

// on click of a checkbox, span should be populated by the checked boxes
// <span class="text">a b d</span>

Answer 1

<span class="text"></span>
<div class="allboxes">
  <input type="checkbox" value="a">
  <input type="checkbox" value="b">
  <input type="checkbox" value="c">
  <input type="checkbox" value="d">
</div>

jquery part

var n = jQuery("div.allboxes :checkbox").map(function(){ 
         return jQuery(this).val();}).get().join(" ");
alert(n);

working example here