0

只有当单选按钮具有属性时，我才需要进行一些计算data-price。目前，计算一直针对所有单选按钮执行。

我附上了我的代码。谁可以帮我这个事？

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title>Hotel Beds</title>
 <script type="text/javascript" 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
 ></script>
 <script type="text/javascript">

   $(document).ready(function() {
        var values = {};
        $('input:radio').change(function() {
            var name = $(this).attr('name');
            values[name] = parseFloat($(this).data('price'));
            var total = 0.0;
            $.each(values, function(i, e) {
                total += e;
            });
            $('#total').text(total.toFixed(2));
        });
    });             
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <input type="radio" name="t1" data-price="25" checked="checked" />
        <span>Price 25</span>
        <input type="radio" name="t1" data-price="30" />
        <span>Price 30</span>
        <br />
        <input type="radio" name="t2" data-price="40" />
        <span>Price 40</span>
        <input type="radio" name="t2" data-price="50" />
        <span>Price 50</span>
        <br />
        <input type="radio" name="G" /><span>Male</span>
        <input type="radio" name="G" /><span>Female</span>
        <input id="total" type="text" />
    </div>
    </form>
</body>
</html>
4

2 回答 2

2

如果单选按钮具有数据价格属性，我需要进行一些计算。

您可以使用“具有属性”选择器将选择限制为仅具有该属性的单选按钮：

$('input:radio[data-price]').change(...

旁注：使用 jQuery 的 CSS 扩展不是最佳实践，因为正如:radioAPI 文档中所说，这意味着 jQuery 无法移交给浏览器的本机处理。反而：

$('input[type=radio][data-price]').change(...
于 2013-07-18T06:51:34.327 回答
1

我不得不改变一个想法来增加总数。

$(document).ready(function () {

    var values = {};
    $('input:radio[data-price]').change(function (){

          var name = $(this).attr('name');
          values[name] = parseFloat($(this).data('price'));
          var total = 0.0;
          $.each(values, function (i, e) {
            total += e;
            console.log('total', total);
          });
          $('#total').val(total.toFixed(2)); // val(total) instead of text(total)
    }); 
});

请在 plnkr.co 上查看工作演示

于 2013-07-18T07:24:38.087 回答