Question

我希望获得total复选框和＆amp;值的值选择选项。

选择选项仅在我选择最后一个值时才有效。复选框工作正常。

我可以知道我在选择时做错了什么。

$(document).on('change keyup', '.price', function(){    
    var total_a = 0;
    var total_b = 0;
    var total_c = 0;    
    $('#total_a option').each(function() {
        if($(this).is(':selected')) {
            total_a = parseFloat($(this).attr("data-price"));
        } else {
            total_a = 0;
        }
    });    
    $('#total_b option').each(function() {
        if ($(this).is(':selected')) {
            total_b = parseFloat($(this).attr("data-price"));
        } else {
            total_b = 0;
        }
    });    
    $("input:checked").each(function() {
        total_c += parseFloat($(this).attr("data-price"));
    });    
    $('.total').html('$ ' + (total_a + total_b + total_c).toFixed(2));    
});

Answer 1

您只是更新变量值而不添加它们，您也可以通过更改选择器来减少代码

$(document).on('change keyup', '.price', function() {
  var total_a = 0;
  var total_b = 0;
  var total_c = 0;
  $('#total_a option:selected').each(function() {
    total_a += parseFloat($(this).attr("data-price"));
  });
  $('#total_b option:selected').each(function() {
    total_b += parseFloat($(this).attr("data-price"));
  });
  $("input:checked").each(function() {
    total_c += parseFloat($(this).attr("data-price"));
  });
  $('.total').html('$ ' + (total_a + total_b + total_c).toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="total_a">
  <input class="price" type="checkbox" value=10 data-price="10" />
  <select class="price" multiple>
    <option value=10 data-price="10">10</option>
    <option value=20 data-price="20">20</option>
    <option value=111  data-price="111">111</option>
    <option value=210  data-price="210">210</option>
  </select>
</div>
<div id="total_b">
  <input type="checkbox" class="price" value=10 data-price="10"/>
  <select class="price" multiple>
    <option value=10 data-price="10">10</option>
    <option value=20 data-price="20">20</option>
    <option value=111  data-price="111">111</option>
    <option value=210  data-price="210">210</option>
  </select>
</div>
<div class="total"></div>

更新：如果您不想单独使用总值，那么您可以组合所有每个迭代器

$(document).on('change keyup', '.price', function() {
  var total = 0
  $('#total_a option:selected,#total_b option:selected,input:checked').each(function() {
    total += parseFloat($(this).attr("data-price"));
  });
  $('.total').html('$ ' + total.toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="total_a">
  <input class="price" type="checkbox" value=10 data-price="10" />
  <select class="price" multiple>
    <option value=10 data-price="10">10</option>
    <option value=20 data-price="20">20</option>
    <option value=111 data-price="111">111</option>
    <option value=210 data-price="210">210</option>
  </select>
</div>
<div id="total_b">
  <input type="checkbox" class="price" value=10 data-price="10" />
  <select class="price" multiple>
    <option value=10 data-price="10">10</option>
    <option value=20 data-price="20">20</option>
    <option value=111 data-price="111">111</option>
    <option value=210 data-price="210">210</option>
  </select>
</div>
<div class="total"></div>

Answer 2

您只是每次更改值，而不是添加总数。这样做：

 total_a += parseFloat($(this).attr("data-price"));//total_a is added with this value

而不是：

 total_a = parseFloat($(this).attr("data-price"));

Answer 3

我觉得很简单就是这样做

http://img.omdbapi.com/?apikey=[yourkey]&

为什么我的选择只获取最后一个值？

3 个答案: