Use an array in this function to display values of chechboxes checked

Question

This function replicates the user experience of a Select/MultiSelect dropdown element - displaying the values of checkboxes checked in a container (adds/removes them when they're checked/unchecked), and if more than 3 items have been checked it displays the # selected instead of the values selected.

It's a combination of 2 functions and they're not playing well together when items are unchecked (i.e. it's removing the values but not the commas, doesn't work correctly when more than 3 items have been selected, etc.)

I think it would be much better if I used an array to store the values, adding/removing values from the array when items are checked/unchecked, and I know how do to in PHP but not in Javascript. This code should create the array, but I can't figure out how to integrate it into my code.

$('input:checkbox[name="color[]"]:checked').each(function () {
     selectedColors.push($(this).val());
});

Existing Code:

JS

$(".dropdown_container ul li").click(function () {
    var text = $(this.children[0]).find("input").val();
    var text_edited = text.replace(/_/g, " ");
    var currentHtml = $(".dropdown_box span").html();
    var positionLocation = currentHtml.indexOf(text_edited);
    var numberChecked = $('input[name="color[]"]:checked').length;

    if (positionLocation < 1) {
        if (numberChecked <= 3) {
            $(".dropdown_box span").html(currentHtml.replace('Colors', ''));
            $(".dropdown_box span").append(', ' + text_edited);                                
            } else {
                $(".dropdown_box span").html(currentHtml.replace(currentHtml, numberChecked + " Selected"));
            }                                                            
    } else {
        (currentHtmlRevised = currentHtml.replace(text_edited, ""));
        $(".dropdown_box span").html(currentHtmlRevised.replace(currentHtml)); 
    }                
});

HTML

<div class="dropdown_box"><span>Colors</span></div>
<div class="dropdown_container">
    <ul id="select_colors">
        <li>
            <label><a href="#"><div style="background-color: #ff8c00" class="color" onclick="toggle_colorbox_alt(this);"><div class=CheckMark>&#10003;</div>
            <input type="checkbox" name="color[]" value="Black" class="cbx"/>
            </div>Black</a></label>
        </li>
        <!-- More List Items --!>
    </ul>
</div>

Answer 1

Easiest to just replace the entire content each time. Also use the change event instead of the click event.

$(".dropdown_container input").change(function () {
    var checked = $(".dropdown_container input:checked");
    var span = $(".dropdown_box span");
    if (checked.length > 3) {
       span.html("" + checked.length + " selected");
    }
    else {
        span.html(checked.map(function () { return $(this).val().replace("_"," "); }).get().join(", "));
    }
});

Example: http://jsfiddle.net/bman654/FCVjj/

Answer 2

try this:

    $('.cbx').change(function(){
      var cbx = $('.cbx:checked');
      var str = '';

      if (cbx.length<=3 && cbx.length!=0){
        for (var i=0;i<cbx.length;i++){
          if (i>0) str += ', ';
          str += cbx[i].value;
        }
     } else if (cbx.length==0){
       str = 'Colors';
     } else {
       str = cbx.length;
     }
     $('.dropdown_box span').html(str);
   });