1

我遇到了动态生成的复选框的问题。我试过这样：

<select name="model" id="model" class="" aria-invalid="false">
<option value="1">iPhone 5</option>
<option value="2">Iphone 4S</option>
<option value="3">Iphone 4</option>
</select>

根据上面选择的值，这些复选框将通过 ajax 生成。这里是通过 ajax 生成的元素：

<p><input type="checkbox" id="screenguard" name="screenguard" value="20" />Cover</p>
<p><input type="checkbox" id="Charger" name="Charger" value="30" />Charger</p>
<p><input type="checkbox" id="hdphdm" name="hdphdm" value="10" />Headphone</p>

<p>
 Calculated Price: <input type="text" name="price" id="price" />
</p>

并且基于对复选框的选择，我需要计算另一个输入框（价格）中的值。这是我的 Jquery 函数：

$(document).ready(function () {
var $inputs = $('input[type="checkbox"]')
    $inputs.on('change', function () {
        var sum = 0;
        $inputs.each(function() {
        // iterate and add it to sum only if checked
           if(this.checked)
               sum += parseInt(this.value);
        });
        $("#price").val(sum);

    });
});

但我不知道为什么它不起作用。请给我任何建议，我做错了什么。

4

2 回答 2

5

您需要像这样使用事件委托-

$(document.body).on('change','input[type="checkbox"]', function () {
于 2013-07-30T19:26:34.703 回答
-1

每次单击复选框时，“总和”都会重置为零。将其移到“更改”事件之外。

于 2013-07-30T19:29:53.627 回答