2

解释在代码下方：

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。

4

6 回答 6

6

我为您的代码创建了一个小提琴。

希望这是你想要的。

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);
于 2012-08-22T05:33:44.310 回答
3

这是你的答案

工作演示

  $('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');
 });
于 2012-08-22T05:30:01.087 回答
0

提琴手

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);
于 2012-08-22T06:01:24.953 回答
0

我已经为上述查询完成了完整的垃圾箱。这里也是演示链接。

演示： 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

于 2012-08-22T07:47:04.090 回答
0

我相信你只是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);
于 2012-08-22T05:30:09.930 回答
0

尝试这个

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

于 2012-08-22T05:30:42.657 回答