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

问题

The explanation is below the code:

The code for HTML is :

<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>

jQuery:

//For select          

function displayVals() {
  var singleValues = $("#more").val();         
  $("#span").html("<b>more addons:</b> " + 
    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);
});

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.

回答1:

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);

回答2:

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');
 });

回答3:

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/

回答4:

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);

回答5:

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

回答6:

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);

来源：https://stackoverflow.com/questions/12066649/jquery-checkbox-and-select-sum-the-values-and-add-in-var

标签

javascript

jquery

html

select

checkbox