javascript - jQuery 复选框并选择 - 对值求和并添加到 var

Question

解释在代码下面:

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>

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

我想要用户总使用量:创建复选框的总和并添加选项的值，这样如果我选择复选框 1 和 2 加上选项 1，我将写入用户总使用量:60。

Answer 1

我创建了一个 fiddle 用于您的代码。

希望这就是您想要的。

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