title: Checked Checkbox value in span
body: <p>I am using a filter for a site and need those checked values to be show in a div in a span. I have gone through the article of Stack Overflow in which it is showing in a div, but  I want the value to be show in span tag. Below is the code I am using of Stack Overflow for the values.</p>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(document).ready(function()
  {
      var el = $('.dropdown_box ');
      var text= el.text();
      $('.dropdown_container').on('click', 'li', function()
      {
          var filter = [];
          $.each($('.dropdown_container').find(':checked'), function(i, el)
          {
              filter.push(el.value);
          });
          el.text(text + ('') + filter.join (''));
      });
  });
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="dropdown_box"&gt;
      Filter Items :
  &lt;/div&gt;
  &lt;div class="dropdown_container"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;input type="checkbox" name="filter[]" value="Black" class="cbx"/&gt;Black&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="filter[]" value="Red" class="cbx"/&gt;Red&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="filter[]" value="brown" class="cbx"/&gt;brown&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="filter[]" value="pink" class="cbx"/&gt;pink&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="filter[]" value="purple" class="cbx"/&gt;purple&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="filter[]" value="Orange" class="cbx"/&gt;Orange&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>