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

Answer 2

这是你的答案

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 3

我相信你只是在if函数中错过了each语句的阻止：除非total为真，否则你不想增加this.checked 。此外，您希望将所有字符串转换为数字，以便您不会从+获取字符串连接 - 我使用了parseInt。另外，根据您的描述，您似乎只想添加option 一次的值，而不是每次都通过循环，所以使用它来初始化total：

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

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

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

但是你也希望在select更改时进行此计算和更新，因此您应该将此循环拉出到单独的函数中并使用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 4

试试这个

$("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 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

我为上面的查询做了完整的垃圾箱。这里也是演示链接。

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

演示： http://codebins.com/bin/4ldqp85

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

6 个答案: