jquery 自动计算总数 [laravel]答案

【问题标题】：jquery auto calculate total [laravel]jquery 自动计算总数 [laravel]
【发布时间】：2022-01-01 02:37:34
【问题描述】：

嘿，我打算创建一个表单，用户选中复选框并输入值，总数将自动计算。

我正在使用 jquery，laravel 7。我注意到总没有出现。下面是jquery

//calculation    
       //calculation    
        var total  = 0,
            values = [];
        
        $('input[type=checkbox], input[type=number]').each(function() {
           $(this).change(function () {
                if( $ (this).is(':checked') && $ (this).val().length != 0) {
                    values.push($(this).val().attr('quantitys'));
                    total += parseFloat($(this).val()) * parseFloat(attr('quantitys'));
                }
           });
        });

        $("#total").text(total);

下面是html

  @foreach ($services as $s)
                    <tr>
                        <td><div class="custom-control custom-checkbox">
                           <input type="checkbox" name="serviceName" class="custom-control-input" id="customCheck{{$loop->index}}" value="{{$s -> servicePrice}}" >
                            <label class="custom-control-label" for="customCheck{{$loop->index}}">{{$s -> serviceName}} {{$s -> servicePrice}}</label>
                        </div>
                        </td>
                        <td>
                            <input type="number"  class="form-control" id="quantitys" name="quantity" " placeholder="weight/measurements"  >
                        </td>
                    </tr>
                @endforeach

这里是表单的sn-p，服务旁边是价格

form

【问题讨论】：

HTML 和 JS 不对齐。例如，HTML 中没有 #customCheck 元素，由于循环（无效），DOM 中将有多个 #quantitys 元素，并且复选框上没有 quantitys 属性。您能否编辑问题以更正示例。
@RoryMcCrossan hye，我已经编辑了代码。你能检查一下吗？

标签： javascript jquery laravel

【解决方案1】：

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var count=0
var total=0
var num=0
var string=""
var priceSpan=""
$('input[type=text]').each(function() {
    priceSpan = $(this).attr('id')
    if($(this).val() != "")
    {
            if($(this).is(':disabled'))
            {
                total+=0
            }
            else{
                //total+=parseFloat($('span[class="'+priceSpan+'"]').text())*parseFloat($(this).val())
            }
    }
    else{
        total+=0
    }
});
$('input[type=checkbox]').each(function() {
    
    if($(this).is(':checked'))
    {
        count+=1
    }
    
});
$('.inputTotal').text(total)
$('.checkBoxTotal').text("CheckBox Total = "+count)

  $('input[type="checkbox"]').click(function() { 
    if ($(this).is(':checked')) {
        //$(this).prop('checked',false);
        
        string = $(this).attr('class')
        $('#'+string).removeAttr('disabled');

        if($('#'+string).val() != "")
        {
            total+=parseFloat($('span[class="'+string+'"]').text())*parseFloat($('#'+string).val());
        }
        $('.inputTotal').text(total)

        count+=1
        $('.checkBoxTotal').text("CheckBox Total = "+count)
        if(count == 0)
        {
            $('.checkBoxTotal').text("")
        }
        
    } else {

        string = $(this).attr('class')
        $('#'+string).attr('disabled',"");

        if($('#'+string).val() != "")
        {
            if(total!=0)
            {
                total-=parseFloat($('span[class="'+string+'"]').text())*parseFloat($('#'+string).val());
            }
        }
        $('.inputTotal').text(total)
         count-=1
          $('.checkBoxTotal').text("CheckBox Total = "+count)
          if(count == 0)
        {
            $('.checkBoxTotal').text("CheckBox Total = "+count)
            }
    }
    
});
$('input[type="text"]').focus(function() {

    if($(this).val() != "")
    {
        num=parseFloat($(this).val())
    }
    else
    {
        num=0
    }

});

$('input[type="text"]').focusout(function(){

    priceSpan = $(this).attr('id')

    if(num < $(this).val())
    {
        if($(this).val() != "")
        {
            total+=parseFloat($('span[class="'+priceSpan+'"]').text())*parseFloat($(this).val())
        }
    }
    else
    {
        total-=parseFloat($('span[class="'+priceSpan+'"]').text())*parseFloat(num)
    }
    $('.inputTotal').text(total)
});

});
</script>
</head>
<body class="container">
    <table class="table">
        <thed>
            <tr>
                <th>Type</th>
                <th>Weight</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" class="item1" id="check1" name="option1" value="something">
            <label class="form-check-label" for="check1">Wash And Fold <span class="item1">2.5</span></label>
        </td>
        <td>
                    <input type="text" id="item1" disabled>
        </td>
            </tr>

            <tr>
                <td>
                    <input type="checkbox" class="item2" id="check2" name="option2" value="something">
      <label class="form-check-label" for="check2">Dry Cleaning <span class="item2">6</span></label>
        </td>
        <td>
                    <input type="text" id="item2" disabled>
        </td>
            </tr>

            <tr>
                <td>
                    <input type="checkbox" class="item3" id="check3" name="option2" value="something">
            <label class="form-check-label" for="check3">Iron <span class="item3">1</span></label>
        </td>
        <td>
                    <input type="text" id="item3" disabled>
        </td>
            </tr>

            <tr>
                <td>
                    <input type="checkbox" class="item4" id="check4" name="option2" value="something">
            <label class="form-check-label" for="check4">Blanket/Curtain cleaning <span class="item4">7</span></label>
        </td>
        <td>
                    <input type="text" id="item4" disabled>
        </td>
            </tr>

            <tr>

            <td>
                <input type="checkbox" class="item5" id="check5" name="option2" value="something">
        <label class="form-check-label" for="check5">Carpet Cleaning <span class="item5">0.6</span></label>
    </td>
    <td>
                <input type="text" id="item5" disabled>
    </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="2"><h4>Total = <small class="inputTotal"></small></h4></th>
        </tr>
    </tfoot>
</table>

</body>
</html>

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var count=0
  $('input[type="checkbox"]').click(function() { 
    if ($(this).is(':checked')) {
        //$(this).prop('checked',false);
        count+=1
        $('.label').text(count)
    } else {
         //$(this).prop('checked',true);
         count-=1
          $('.label').text(count)
    }
    
});
});
</script>
</head>
<body>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check1" name="option1" value="something">
      <label class="form-check-label" for="check1">Option 1</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
      <label class="form-check-label" for="check2">Option 2</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
      <label class="form-check-label" for="check2">Option 2</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
      <label class="form-check-label" for="check2">Option 2</label>
    </div><div class="form-check">
      <input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
      <label class="form-check-label" for="check2">Option 2</label>
    </div>
    
    <label class="label"></label>
</body>
</html>

【讨论】：

hye 谢谢 :) 你也可以演示计算复选框和文本框需要输入数量的文本框。所以复选框已经设置了值并且用户在文本框中输入了另一个输入，就像在我在问题中提供的图片链接
sry，我不明白你想要什么，请演示一下，解决你的问题后
选中复选框的总重量，你要这个？？？
像这样，每个复选框都有自己的值，每个复选框都有自己的文本框，用户将在其中输入。示例：复选框 1 的值为 3。因此用户选中了复选框 1，然后在文本框中输入数量。并自动计算它们。
好的，给我一些时间，我，我解决