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

Run function on input change and checkbox change

本文关键字：运行 功能 复选框 输入      更新时间：2023-09-26

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

更新我在这里创建了一个FIDDLE

功能：

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，并且取消选中复选框，则必须从总额中扣除该金额（10倍，例如0.25欧元）。

我认为这样的东西应该起作用，但事实并非如此：

$(".idRow").change(function(){
  if($(this).attr("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();
    });
});

检查JSFiddle演示


更新：

如果在某些表单中你没有复选框（换句话说，有些价格不是可选的），那么你必须检查复选框是否存在，如果存在，那么检查是否选中。
为了做到这一点，修改更新功能如下：

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.length == 0），则求和值。

检查JSFiddle演示

试试这个：使用道具而不是属性

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

u可以进行

<div class="checkbox cell">
    <input type="checkbox"/>
</div>
jQuery("div.checkbox > input:checkbox").on('click',function(){
    alert('asdasd');
});

http://jsfiddle.net/1r7rk21w/

如果您希望值基于选中的属性进行更新，那么您的sum函数实际上需要使用该复选框，对吗？

JS:

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