Javascript 在输入更改和复选框更改时运行函数

我有一个具有多种形式的引导模式。所有表单都有一个输入字段和复选框。每次发生更改事件时，我都会尝试运行函数

update\u amounts\u modal

。当我更改输入值时，此选项起作用，但当我选中/取消选中复选框时，此选项不起作用

更新我制作了一把小提琴

职能：

function update_amounts_modal(){
  var sum = 0.0;
  $('form').each(function() {
    var qty = $(this).find('.qty input').val();
    var price = $(this).find('.price input').val();
    qty= parseInt(qty) || 0;
    price= parseFloat(price) || 0;
    var amount = (qty*price)
                 sum+=amount;
  });
    $('.total-modal').text('€'+sum.toFixed(2));
}

  update_amounts_modal();
  $('form .qty').change(function(){
    update_amounts_modal();
    $('.total-modal').change();
  });

更改功能：

function update_amounts_modal(){
  var sum = 0.0;
  $('form').each(function() {
    var qty = $(this).find('.qty input').val();
    var price = $(this).find('.price input').val();
    qty= parseInt(qty) || 0;
    price= parseFloat(price) || 0;
    var amount = (qty*price)
                 sum+=amount;
  });
    $('.total-modal').text('€'+sum.toFixed(2));
}

  update_amounts_modal();
  $('form .qty').change(function(){
    update_amounts_modal();
    $('.total-modal').change();
  });

HTML:

我没有错，只是什么都没发生。有没有更好的方法来实现这一点

你能做什么

<div class="checkbox cell">
    <input type="checkbox"/>
</div>

jQuery("div.checkbox > input:checkbox").on('click',function(){
    alert('asdasd');
});

jQuery（“div.checkbox>input:checkbox”）。在（'click'，function（）上{
警报（“asdasd”）；
});

---

尝试以下方法：使用prop代替attr

$(".idRow").change(function(){
   if($(this).prop("checked")){
    update_amounts_modal();
   }
   else{
       update_amounts_modal();
    }
});

---

我不确定你是否正确地理解了你的问题，但我认为你正在寻找这样的答案：

function update_amounts_modal() {
    var sum = 0.0;
    $('form').each(function () {
        var qty = $(this).find('.qty').val();
        var price = $(this).find('.price').val();
        var isChecked = $(this).find('.idRow').prop("checked");
        if (isChecked){
            qty = parseInt(qty, 10) || 0;
            price = parseFloat(price) || 0;
            var amount = (qty * price);
            sum += amount;
        }
    });
    $('.total-modal').text('€' + sum.toFixed(2));
}

$().ready(function () {
    update_amounts_modal();
    $('form .qty, form .idRow').change(function () {
        update_amounts_modal();
    });
});

function update_amounts_modal() {
    var sum = 0.0;
    $('form').each(function () {
        var qty = $(this).find('.qty').val();
        var price = $(this).find('.price').val();
        var checkbox = $(this).find('.idRow');
        if (checkbox.prop("checked") || checkbox.length == 0){
            qty = parseInt(qty, 10) || 0;
            price = parseFloat(price) || 0;
            var amount = (qty * price);
            sum += amount;
        }
    });
    $('.total-modal').text('€' + sum.toFixed(2));
}

更新：

如果在某些表单中没有复选框（换句话说，某些价格不是可选的），则必须选中该复选框是否存在，如果存在，则选中该复选框是否存在。
为此，请修改更新函数，如下所示：

function update_amounts_modal() {
    var sum = 0.0;
    $('form').each(function () {
        var qty = $(this).find('.qty').val();
        var price = $(this).find('.price').val();
        var isChecked = $(this).find('.idRow').prop("checked");
        if (isChecked){
            qty = parseInt(qty, 10) || 0;
            price = parseFloat(price) || 0;
            var amount = (qty * price);
            sum += amount;
        }
    });
    $('.total-modal').text('€' + sum.toFixed(2));
}

$().ready(function () {
    update_amounts_modal();
    $('form .qty, form .idRow').change(function () {
        update_amounts_modal();
    });
});

function update_amounts_modal() {
    var sum = 0.0;
    $('form').each(function () {
        var qty = $(this).find('.qty').val();
        var price = $(this).find('.price').val();
        var checkbox = $(this).find('.idRow');
        if (checkbox.prop("checked") || checkbox.length == 0){
            qty = parseInt(qty, 10) || 0;
            price = parseFloat(price) || 0;
            var amount = (qty * price);
            sum += amount;
        }
    });
    $('.total-modal').text('€' + sum.toFixed(2));
}

在这一行：

if（checkbox.prop（“checked”）| | checkbox.length==0）{

我们说，如果checkbox被选中（

checkbox.prop（“checked”）

），或者没有复选框（

checkbox.length==0

），则求和

---

如果希望根据选中的属性更新值，那么求和函数需要实际使用该复选框，对吗

JS:

---

为什么在这两种情况下都调用同一个函数？@DavidThomas:请参阅更新的答案！t之前尝试过此操作，但仍无法更新总数。还有其他建议吗？您说过“当我选中/取消选中复选框时不起作用”…上面的答案解决了当您选中/取消选中复选框时调用函数的相关问题。它不会解决函数内部的问题，您必须执行此操作。以前尝试过此操作，但仍然无法更新总数。还有其他建议吗？我创建了一个小提琴。您可以确切地看到我的意思HTAF:you have crea特德是一把很好的小提琴来解释。帮了大忙。@Moshtaf：相信我，我试过这个，但它不起作用。现在我在小提琴上看到它确实起作用，但在我的模态中不起作用。这有关系吗？我想没有。我会接受答案的，因为你给我指出了正确的方向。我想你的问题不是问题中提到的，你没有读过st计算函数中复选框的日期，无论复选框是否更改，您是否在我的答案中看到这一行？

if（isChecked）{

我添加了这个，并且在

函数中添加了
form.idRow
。change

函数。如果复选框未选中，我想你忘了从

sum

中删除值。@Moshtaf:最后一个问题..如果

isChecked

返回未定义的值怎么办？如何绕过它，以便

更新金额(modal

仍然计算总数？