title: jQuery checkbox and select - sum the values and add in var
body: <p>The explanation is below the code:</p>
  
  <p>The code for HTML is :</p>
  
  <pre><code>&lt;div id="container"&gt;&lt;h1&gt;Add-ons&lt;/h1&gt;
  &lt;input type="checkbox" name="ch1" value="10" id="qr1" /&gt;Add-on Number 1 - 10 QR &lt;br /&gt;
  &lt;input type="checkbox" name="ch1" value="20" id="qr1" /&gt;Add-on Number 2 - 20 QR &lt;br /&gt;
  &lt;input type="checkbox" name="ch1" value="40" id="qr1" /&gt;Add-on Number 3 - 40 QR &lt;br /&gt;
  &lt;input type="checkbox" name="ch1" value="60" id="qr1" /&gt;Add-on Number 4 - 60 QR &lt;br /&gt;
  &lt;/div&gt;
  
  &lt;div&gt; I want more add-ons
  &lt;select id="more" name="more"&gt;
      &lt;option value="0 QR"&gt;0&lt;/option&gt;
      &lt;option value="30 QR"&gt;1&lt;/option&gt;
      &lt;option value="50 QR"&gt;2&lt;/option&gt;
      &lt;option value="100 QR"&gt;3&lt;/option&gt;
  &lt;/select&gt;
  &lt;span id="span"&gt;&lt;/span&gt;
   User total usage: &lt;span id="usertotal"&gt; &lt;/span&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>//For select          
  
  function displayVals() {
    var singleValues = $("#more").val();         
    $("#span").html("&lt;b&gt;more addons:&lt;/b&gt; " + 
      singleValues);
  }
  
  $("select").change(displayVals);
  displayVals();
  
  //For  checkboxes
  var $cbs = $('input[name="ch1"]');
  $cbs.click(function() {
    var total = 0;
    $cbs.each(function() {
      if (this.checked)
        var singleValues = $("#more").val();
        total += +this.value + singleValues;
    });
    $("#usertotal").text(total);
  });
  </code></pre>
  
  <p>I want the user total usage: to create the sum of the checkboxes and add the value of the option so that if I select checkbox 1 and 2 plus option 1 I will have written in user total usage: 60.</p>