Question

嗨，大家好我一直在研究这个剧本已有一段时间了，我只是不能让它运作良好我可能会错过一个重要的论据，让它正常工作..

我需要从标签内部计算值，并将总数加到HTML中：

<div class="catProdAttributeItem">
    <input type="radio" id="5583116" name="752526">
    <span>Ford £19.99</span>
    <img src="http://www.breakerlink.com/blog/wp-content/uploads/2014/01/Ford.png">
</div>

<div class="catProdAttributeItem">
    <input type="radio" id="5971554" name="752526">
    <span>Ferrary £19.99</span>
    <img src="http://www.assettocorsa.net/wp-content/uploads/2013/09/logo2.png">
</div> 
<br><br>
    <span style="display:none;" class="original_price">£0.00</span>
    <div class="updated_price" id="show-price">£0.00</div>

这是我的剧本：

    $('.catProdAttributeItem img').on("click", function() {
    $(this).siblings('input[type=radio]').attr('checked', true);
    var original_price = $('.original_price').text().replace(/[^0-9\.]/g, '');
    parseFloat(this.original_price);
    var warehouse_price = $(this).siblings('.catProdAttributeItem span').text().replace(/[^0-9\.]/g, '');
    warehouse_price = parseFloat(warehouse_price);
    var total_price = parseFloat(original_price) + parseFloat(warehouse_price);
    $('.updated_price').html('£' + total_price.toFixed(2));
})

我只能得到点击的兄弟姐妹的结果，请一些帮助非常感谢..

我希望在选择输入时将.updated_price上显示的值相加但是它可以在更广泛的输入集合上工作，您可以检查更多输入，并且您将获得所有输入检查的结果

DEMO FIDDLE

Answer 1

您需要每辆车的复选框（不是收音机）。见下文：

＆＃13;

$(document).ready(function() {
  $('.catProdAttributeItem img').on("click", function() {
    // Make checkbox adjustment
    $(this).siblings('input:checkbox').click();
  });
  
  $(document).on('click', 'input:checkbox', calcTotal);
});

function calcTotal() {
  var total_price = 0;
  // find all .catProdAttributeItem divs
  $(document).find('.catProdAttributeItem').each(function() {
    // see if the checkbox is checked to add to the total_price
    var $checkbox = $(this).find('input:checkbox');
    if ($checkbox.is(':checked')) {
      var text = $(this).find('span').html();
      total_price += parseFloat(text.replace(/[^0-9\.]/g, ''))
    }
  });
  // finally display the price
  $('.updated_price').html('£' + total_price.toFixed(2));
}

＆＃13;

.catProdAttributeItem {
  width: 300px;
  float: left;
  display: inline-block;
  text-align: center;
}
img {
  width: 100px;
  height: auto;
}
.updated_price {
  clear: both;
  margin: 20px 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="catProdAttributeItem">
  <input type="checkbox" id="5583116" name="752526">
  <span>Ford £19.99</span>
  <img src="http://www.breakerlink.com/blog/wp-content/uploads/2014/01/Ford.png">
</div>

<div class="catProdAttributeItem">
  <input type="checkbox" id="5971554" name="752526">
  <span>Ferrary £19.99</span>
  <img src="http://www.assettocorsa.net/wp-content/uploads/2013/09/logo2.png">
</div>
<br>
<br>

<div class="updated_price" id="show-price">£0.00</div>

＆＃13;

Answer 2

根据我对您要执行的操作的理解，您只需迭代所有.catProdAttributeItem元素，并仅在选中单选按钮时添加价格：

var warehouse_price = 0;

$('.catProdAttributeItem')
    .filter(function() {
        // only interested in checked radio boxes
        return $('input:checked', this).length > 0;
    })
    .each(function() {
        var price = parseFloat($('span', this).text().replace(/[^\d.]/, ''));
        warehouse_price += price;
    });

$('.updated_price').html('£' + total_price.toFixed(2));

Answer 3

这个答案是Sigismundus答案的结合+有点精简，能够从单选按钮和复选框中获取结果，img点击不能很好地工作，但现在如果添加一个新的功能将图像作为单选按钮来工作。

var priceSelect = parseFloat(document.getElementById("totalprice").value);
$('.catProdAttributeItem input[type=radio], .catProdAttributeItem input[type=checkbox] ').on("click", function() {
    var total_price = 0;
    $(document).find('.catProdAttributeItem').each(function() {
      var $checkbox = $(this).find('input:radio, input:checkbox');
      if ($checkbox.is(':checked')) {
        var text = $(this).find('span').html();
        total_price += parseFloat(text.replace(/[^0-9\.]/g, ''))
      }
    });
    $('#totalprice').html('£' + total_price.toFixed(2));

    document.getElementById('totalprice').value = total_price+priceSelect;
  });

使用jQuery从兄弟姐妹中添加值

3 个答案: