jQuery checkbox and select - sum the values and add in var

Question

The explanation is below the code:

The code for HTML is :

Add-ons


        
                      

              相关标签:
       
      

Answer 1

I believe that you're simply missing a block for your if statement in the each function: you don't want to increment total unless this.checked is true. Furthermore, you want to convert all strings to numbers so that you don't get string concatenation from + - I've used parseInt. Also, from your description, it seems like you only want to add the value from the option once, not each time through the loop, so use that to initialize total:

$cbs.click(function()
{
    var total = parseInt($("#more").val());

    $cbs.each(function()
    {
        if (this.checked)
            total += parseInt(this.value);
    });

    $("#usertotal").text(total);
});

But you also want to do this calculation and update when the select changes, so you should pull this loop out into a separate function and call it using click:

function calculateTotal()
{
    var total = parseInt($("#more").val());

    $cbs.each(function()
    {
        if (this.checked)
            total += parseInt(this.value);
    });

    $("#usertotal").text(total);
}

$("#more").change(calculateTotal);
$cbs.click(calculateTotal);

Answer 2

Try this

$("select").change(function() {
    $('input[name="ch1"]').change(); // trigger change to recalculate
});
$('input[name="ch1"]').change(function() {
    var singleValues = 0;
    $('input[name="ch1"]:checked').each(function() { // loop through checked inputs
        singleValues = +this.value + singleValues;
    });
    singleValues += (+$('#more').val().replace('QR', '').trim());  // add drop down to checked inputs
    $("#usertotal").text(singleValues);
});​

http://jsfiddle.net/wirey00/5s8qr/

Answer 3

I have done complete bins for above query. here is demo link as well.

Demo: http://codebins.com/bin/4ldqp85

HTML

<div id="container">
  <h1>
    Add-ons
  </h1>
  <input type="checkbox" name="ch1" value="10" id="qr1" />
  Add-on Number 1 - 10 QR 
  <br />
  <input type="checkbox" name="ch1" value="20" id="qr1" />
  Add-on Number 2 - 20 QR 
  <br />
  <input type="checkbox" name="ch1" value="40" id="qr1" />
  Add-on Number 3 - 40 QR 
  <br />
  <input type="checkbox" name="ch1" value="60" id="qr1" />
  Add-on Number 4 - 60 QR 
  <br />
</div>
<div>
  I want more add-ons
  <select id="more" name="more">
    <option value="0 QR">
      0
    </option>
    <option value="30 QR">
      1
    </option>
    <option value="50 QR">
      2
    </option>
    <option value="100 QR">
      3
    </option>
  </select>
  <span id="span">
  </span>
  User total usage: 
  <span id="usertotal">

  </span>
</div>

JQuery

$(function() {
    $('input[name="ch1"]:checkbox').change(function() {
        var total = 0;
        $('input[name="ch1"]:checked').each(function() {
            total += parseInt($(this).val());
        });
        total += parseInt($('#more').val());
        $('#usertotal').html(total);
    });
    $('#more').change(function() {
        var selectVal = $(this).val().trim();
        if (parseInt(selectVal) > 0) {
            $("#span").html("<b>more addons:</b> " + selectVal);
        } else {
            $("#span").html("");
        }
        $('input[name="ch1"]:checkbox').trigger('change');
    });
});

Demo: http://codebins.com/bin/4ldqp85

Answer 4

Here is your answer

Working Demo

  $('input:checkbox').change(function(){
var tot=0;
$('input:checkbox:checked').each(function(){
tot+=parseInt($(this).val());
});
 tot+=parseInt($('#more').val());
$('#usertotal').html(tot)
});

 $('#more').change(function(){
  $('input:checkbox').trigger('change');
 });

Answer 5

JsFiddle

HTML:

<div id="container"><h1>Add-ons</h1>
<input type="checkbox" name="ch1" value="10" id="qr1" />Add-on Number 1 - 10 QR <br />
<input type="checkbox" name="ch1" value="20" id="qr1" />Add-on Number 2 - 20 QR <br />
<input type="checkbox" name="ch1" value="40" id="qr1" />Add-on Number 3 - 40 QR <br />
<input type="checkbox" name="ch1" value="60" id="qr1" />Add-on Number 4 - 60 QR <br />
</div>

<div> I want more add-ons
<select id="more" name="more">
    <option value="0">0</option>
    <option value="30">1</option>
    <option value="50">2</option>
    <option value="100">3</option>
</select>
<span id="span"></span>
 User total usage: <span id="usertotal"> </span>

Javascript:

function displayVals() {
      calcUsage();
      var singleValues = $("#more").val();         
      $("#span").html("<b>more addons:</b> " + 
                  singleValues + ' QR');
}
var $cbs = $('input[name="ch1"]');
function calcUsage() {
    var total = $("#more").val();
    $cbs.each(function() {
        if (this.checked)
            total = parseInt(total) + parseInt(this.value);
    });
    $("#usertotal").text(total + ' QR');
}

    $("select").change(displayVals);
    displayVals();
//For  checkboxes

$cbs.click(calcUsage);

Answer 6

I've created a fiddle for your code.

Hope this is what you wanted.

HTML:

<div id="container"><h1>Add-ons</h1>
<input type="checkbox" name="ch1" value="10" id="qr1" />Add-on Number 1 - 10 QR <br />
<input type="checkbox" name="ch1" value="20" id="qr1" />Add-on Number 2 - 20 QR <br />
<input type="checkbox" name="ch1" value="40" id="qr1" />Add-on Number 3 - 40 QR <br />
<input type="checkbox" name="ch1" value="60" id="qr1" />Add-on Number 4 - 60 QR <br />
</div>

<div> I want more add-ons
<select id="more" name="more">
    <option value="0">0</option>
    <option value="30">1</option>
    <option value="50">2</option>
    <option value="100">3</option>
</select>
<span id="span"></span>
 User total usage: <span id="usertotal"> </span>

Javascript:

function displayVals() {
      calcUsage();
      var singleValues = $("#more").val();         
      $("#span").html("<b>more addons:</b> " + 
                  singleValues + ' QR');
}
var $cbs = $('input[name="ch1"]');
function calcUsage() {
    var total = $("#more").val();
    $cbs.each(function() {
        if (this.checked)
            total = parseInt(total) + parseInt(this.value);
    });
    $("#usertotal").text(total + ' QR');
}

    $("select").change(displayVals);
    displayVals();
//For  checkboxes

$cbs.click(calcUsage);