Question

只有当单选按钮具有属性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>

Answer 1

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

您可以使用"has attribute" selector将选择限制为仅具有该属性的单选按钮：

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

附注：使用jQuery的CSS扩展不是最佳实践，因为as it says in the :radio API documentation，这意味着jQuery无法传递给浏览器的本机处理。代替：

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

Answer 2

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

$(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)
    }); 
});

请参阅working demo at plnkr.co

仅当元素具有特定属性时才执行更改事件

2 个答案: