0

I need to do some calculations only if the radio button has the attribute data-price. Currently the calculation is executed all the time for all the radio buttons.

I Have attached My Code. Can any one help me on this?

<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 に答える