3

現在、チェックボックスから返される値を取得して、入力ボックスの値をjQueryで乗算するのに苦労しています。

チェックボックスにチェックを入れて数量を尋ねるとdivを表示します。その後、数量にチェックボックスの値を掛ける必要があります。

現在のコードは次のとおりです。

$(document).ready(function () {
    var sum = 0;
    var qty = 0;

    $("input[type=checkbox]").change(function () {
        recalculateQty();
        recalculateCheck();
        if ($('#1').is(':checked')) {
            $('#checked-1').show();
        } else {
            $('#checked-1').hide();
        }
        if ($('#2').is(':checked')) {
            $('#checked-2').show();
        } else {
            $('#checked-2').hide();
        }
        if ($('#3').is(':checked')) {
            $('#checked-3').show();
        } else {
            $('#checked-3').hide();
        }
    });

    function recalculateQty() {
        $('.qty').keyup(function () {
            $('.qty').each(function () {
                qty += parseInt(this.value, 10);
                recalculateCheck();
            });
        });
    }

    function recalculateCheck() {
        var sum = 0;
        $("input[type=checkbox]:checked").each(function () {
            sum += parseInt($(this).val());
        });
        $('.qty').keyup(function () {
            $('.qty').each(function () {
                qty += parseInt(this.value, 10);
            });
        });
        $('#total').val(sum * qty);
    }
});

<input type="checkbox" id="1" value="30" name="1" />
<input type="checkbox" id="2" value="60" name="2" />
<input type="checkbox" id="3" value="90" name="3" />

<div style="display:none;" id="checked-1">
    <input type="text" name="product_1_qty" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" />
</div>

http://jsfiddle.net/isherwood/9vRtJ/1/

4

1 に答える 1

0

最終結果として ID を持つ要素値を設定しようとしていtotalますが、HTML コードにそのような要素がありません。
この要素を html コードに追加するだけです (ここでは別のテキスト ボックスを配置します)。

<input type="text" id='total'>

修正のためにライブデモを チェックする

か、より良いコーディングを使用できます:(コメントを読んでください) - Working DEMO

$(document).ready(function () {
    var sum = 0;
    var qty = 0;
    $("input[type=checkbox]").change(function () {
        if ($('#1').is(':checked')) {
            $('#checked-1').show(); 
        } else {
            $('#checked-1').hide();
        }
    });
     $('.qty').keyup(function () { // if user typed anyting in the Quantity
          sum = parseInt($('#1').val()); // get checkbox value and change the data type to int
          qty = parseInt($(this).val()); // get Quantity value and change the data type to int
          //console.log(sum,qty);
          if(sum && qty) { // if the values was not empty
              $('#total').val(sum * qty); // show the result in the total element
          } else { // if the values was empty
              $('#total').val(''); // clear the result textbox
          }
     });
});
于 2013-05-29T20:46:12.733 に答える