Question

我找到了以下代码来计算表单上的复选框值： http://jsfiddle.net/jfriend00/RT4XS/

而不是使用＆＃34;值＆＃34;元素，是否可以使用另一个元素来计算总数？例如，＆＃34;值＆＃34; element已被其他插件保留，我想添加另一个元素，例如＆＃34; price＆＃34;或＆＃34;尺寸＆＃34;将它用作物品价格。

＆＃13;

// When the page is ready
$(document).ready(function() {
    $("input").click(function(event) {
        updateTotal();
    });
});

function updateTotal() {
    var total = 0;
    $("#menu input:checked").each(function() {
        total += parseFloat(this.value);
    });
    $('#TotalCost').val("$" + total.toFixed(2));
}

＆＃13;

<html>
    <body>
        <div id="menu">
        <b>Cost of Dinner</b>
        <p>
            <input type="checkbox" value="value_used_by_other" price="2" name="Hamburger">Hamburger ($2)<br/>
            <input type="checkbox" value="value_used_by_other" price="1" name="French Fries">French Fries ($1)<br/>
            <input type="checkbox" value="value_used_by_other" price="3" name="Shake">Shake ($3)<br/> 
        </p>
        </div>
        <p>
            Cost of Dinner <input type="text" name="TotlCost" id="TotalCost" size="10"/>
        </p>
    </body>
</html>

＆＃13;

如何修改要使用的代码＆＃34;价格＆＃34;元素值或其他元素值而不是＆＃34;值＆＃34;元件？

非常感谢。

Answer 1

您可以使用html5标准data-属性。实施例

<input type="checkbox" value="value_used_by_other" data-price="2" name="Hamburger">

提取你要做的价格

$(this).data('price');

Answer 2

使用data attributes。这将使您的HTML有效。

＆＃13;

function updateTotal() {
  var total = 0;
  
  $("#menu input:checked").each(function() {
    total += parseFloat($(this).data('price'));
  });
  
  $('#TotalCost').val("$" + total.toFixed(2));
}

$('input').on('click', updateTotal);

＆＃13;

<div id="menu">
  <b>Cost of Dinner</b>
  <p>
    <input type="checkbox" value="value_used_by_other" data-price="2" name="Hamburger">Hamburger ($2)<br/>
    <input type="checkbox" value="value_used_by_other" data-price="1" name="French Fries">French Fries ($1)<br/>
    <input type="checkbox" value="value_used_by_other" data-price="3" name="Shake">Shake ($3)<br/> 
  </p>
</div>
<p>
  Cost of Dinner <input type="text" name="TotlCost" id="TotalCost" size="10"/>
</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

表单上的复选框计算

2 个答案: