Question

我有一个Bootstrap模式，里面有多个表单。所有表单都有一个输入字段和复选框。每次发生更改事件时，我都会尝试运行函数update_amounts_modal。这在我更改输入值但在我选中/取消选中复选框时不起作用时有效。

更新我创建了一个独特的HERE

功能：

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：

<form method="post" data-target="#modal" data-async="" action="action_url">
  <div class="qty cell">
    <input type="text" class="qty" value="1" name="quantity">
  </div>
  <div class="price cell">
    <span class="euro">€</span><input type="text" disabled="" class="price" value="0.60">
  </div>
  <div class="checkbox cell">
     <input type="checkbox" checked="" value="12933006" name="product[]" class="idRow">
  </div>
</form>

//And more forms exactly like this but with different input values!

<div class="total-modal">€0.00</div>

实际需要发生的是，通过检查/取消选中该值需要使用该函数重新计算。因此，如果您已将qty设置为10并取消选中该复选框，则必须从总数中扣除此金额（10x，例如€0.25）。

我认为这样的事情应该有效但不是：

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

我没有收到任何错误，但没有发生任何事情。有没有更好的方法来实现这一目标？

Answer 1

试试这个：而不是attr使用prop

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

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

<强> Check JSFiddle Demo

<强>更新

如果在某些形式中你没有CheckBox（换句话说，某些价格不是可选的），那么你必须检查CheckBox是否存在以及是否存在，所以检查是否已检查。
为此，请修改更新函数，如下所示：

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.prop("checked")）或没有CheckBox（checkbox.length == 0），则将值相加。

<强> Check JSFiddle Demo

Answer 3

你可以做到

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

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

http://jsfiddle.net/1r7rk21w/

Answer 4

如果您希望根据checked属性更新值，那么sum函数需要实际使用该复选框吗？

JS：

$('form').each(function () {
    if ($(this).find(".idRow").prop("checked") === true){
        //
        // The normal computations you had before...
        //
    } 
});

输入更改和复选框更改时运行功能

4 个答案: