Javascript 选中复选框并使用ajax提交表单时，发货地址与账单地址相同

我有两张地址表。一个是账单，另一个是运输。当用户选中“发货至相同地址”复选框时，发货表单将隐藏

当我在点击复选框之前通过表单时，表单不会被提交。选中该复选框时，两种表单都会发送准确的数据，但当用户取消选中该复选框时，账单地址会发送三次

我使用jQuery和ajax代码提交表单

    $(document).ready(function(){

      $('.le-checkbox').click(function(){

        if(this.checked) {
          $("#deliveryadd").hide();
          $(".le-checkbox").attr("checked", "checked");
          $('#submit').click(function(){
            var address= $('#address').val();
            var city_id= $('#city_id').val();
            var user = {{Auth::user()->id}};
            console.log(address,city_id,user);
            console.log(address,city_id,user);
            billing(address,city_id,user);
            shipping(daddress,dcity_id,user);
          });
        } 
        else {
          $("#deliveryadd").show();
          $(".le-checkbox").removeAttr("checked");
          $('#submit').click(function(){
            var address= $('#address').val();
            var city_id= $('#city_id').val();
            var user = {{Auth::user()->id}};
            console.log(address,city_id,user);
            billing(address,city_id,user);
          });
          $('#deliverySubmit').click(function(){    
            var daddress= $('#de_address').val();
            var dcity_id= $('#de_city_id').val();
            var user = {{Auth::user()->id}};
            console.log(daddress,dcity_id,user);    
            shipping(daddress,dcity_id,user);
          });
        }

      });

      function billing(baddress,bcity,buser){
        $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });
        $.ajax({
          url: '{{url("/billing-address")}}',
          type: 'post',
          dataType: 'html',
          data: {
            address:baddress,
            city_id:bcity,
            user_id:buser
          },
          success: function(result){
            $('#billing').html(result);
          }
        }).fail(function(jqXHR, textStatus, error){
          console.log(jqXHR.responseText);
        });
      }

      function shipping(saddress,scity,suser){
        $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });
        $.ajax({
          url: '{{url("/shipping-address")}}',
          type: 'post',
          dataType: 'html',
          data: {
            address:saddress,
            city_id:scity,
            user_id:suser
          },
          success: function(result){
            $('#shipping').html(result);
          }
        }).fail(function(jqXHR, textStatus, error){
          console.log(jqXHR.responseText);
        });
      }
    });

这是发货单代码

        <h2 class="border h1">shipping address</h2>
        @if(App\Address::where('user_id',Auth::user()->id)->where('type','Delivery')->exists())
        <address class="bold" id="addr">
            @foreach ($collection = Auth::user()->address as $item)
            @if ($item->type == 'Delivery')
                {{$item->street}},<br>
                {{$item->city->name}},<br>
                {{$item->city->parent->name}}
                @endif    
            @endforeach
            </address>
        @else
    <div class="billing-address" id="deliveryadd">
                               <div class="row field-row">
                                <div class="col-xs-12">
                                    <label>address*</label>
                                    <input class="le-input" type="text" id="de_address" data-placeholder="Street address" name="de_address">
                                </div>
                            </div><!-- /.field-row -->

                            <div class="row field-row">
                                <div class="col-xs-12 col-sm-6">
                                    <label>City*</label>
                                    <select class="le-input">
                                        <option>Lahore</option>
                                    </select>
                                </div>
                                <div class="col-xs-12 col-sm-6">
                                    <label>&nbsp;</label>
                                    <select class="le-input" id="de_city_id">
                                    <option value="null">Select Town</option>
                                    @foreach ($collection = App\City::where('parent_id','!=', '0')->get() as $item)
                                    <option value="{{$item->id}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                                </div>
                            </div><!-- /.field-row -->

                            <button id="deliverySubmit" class="le-button big">Save</button>
        </div><!-- /#shipping-address -->
        <div class="row field-row">
                <div class="col-xs-12">
                    <input name="same" class="le-checkbox big" type="checkbox" />
                    <a class="simple-link bold" href="#">ship to Same address?</a>
                </div>
            </div><!-- /.field-row -->
            @endif

送货地址
@if（App\Address:：where（'user\u id'，Auth:：user（）->id）->where（'type'，'Delivery'）->exists（））
@恩迪夫

这是账单表单HTML代码

<h2 class="border h1">billing address</h2>
{{-- <a style="float: right;" href="javascript:;" id="edit">Edit</a> --}}
                @if(App\Address::where('user_id',Auth::user()->id)->where('type','Billing')->exists())
                <address class="bold" id="addr">
                    @foreach ($collection = Auth::user()->address as $item)
                    @if ($item->type == 'Billing')
                        {{$item->street}},<br>
                        {{$item->city->name}},<br>
                        {{$item->city->parent->name}}
                        @endif    
                    @endforeach
                    </address>
                @else
                    <div class="row field-row">
                        <div class="col-xs-12">
                            <label>address*</label>
                            <input class="le-input" type="text" id="address" data-placeholder="Street address">
                        </div>
                    </div><!-- /.field-row -->

                    <div class="row field-row">
                        <div class="col-xs-12 col-sm-6">
                            <label>City*</label>
                            <select class="le-input">
                                <option>Lahore</option>
                            </select>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <label>&nbsp;</label>
                            <select class="le-input" id="city_id">
                            <option value="null">Select Town</option>
                            @foreach ($collection = App\City::where('parent_id','!=', '0')->get() as $item)
                            <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                        </div>
                    </div><!-- /.field-row -->

                    <button id="submit" class="le-button big">Save</button>
                @endif

账单地址
{{--  --}}
@if（App\Address:：where（'user\u id'，Auth:：user（）->id）->where（'type'，'Billing'）->exists（））
@foreach（$collection=Auth:：user（）->地址为$item）
@如果（$item->type=='Billing'）
{{$item->street}，

{{$item->city->name}，

{{$item->city->parent->name}
@恩迪夫
@endforeach
@否则
地址*
城市*
拉合尔
选择城镇
@foreach（$collection=App\City:：where（'parent_id'，'！='，'0'）->get（）作为$item）
{{$item->name}
@endforeach
拯救
@恩迪夫

当单击复选框时，您的代码正在为单击提交按钮分配事件处理程序。这意味着：

• 如果未单击复选框，则不会为这些按钮单击设置事件处理程序。因此，点击按钮不会做任何JS提交的事情，但它可能会做正常的非JS表单提交

• 如果您单击该复选框一次，例如勾选它，则会将事件处理程序添加到

  #submit

  按钮。如果现在取消选中该复选框，则将另一个事件处理程序添加到

  #submit

  按钮，并在

  #deliverySubmit

  按钮上添加一个事件处理程序！取消选中该复选框不会删除先前添加的事件处理程序。因此，如果单击

  #submit

  ，两个处理程序都将启动。如果您多次勾选并取消勾选复选框，您只需不断堆积额外的事件处理程序，当您最后单击按钮时，所有事件处理程序都将运行

这不是一个好办法。相反，您应该独立于用户交互设置事件处理程序，并让代码根据复选框状态确定要执行的操作

其他一些意见：

• 要跟踪复选框上的单击，应使用

  $（'.le checkbox'）。在（'change'，function（）{

  ，而不是

  单击

• 我不知道为什么在勾选复选框时手动设置复选框状态（例如，

  $（“.le checkbox”）.attr（“checked”，“checked”）；

  ）？我不会这样做，它肯定只会导致问题，实际上没有做任何事情

• 在您的

  #submit

  处理程序中，当勾选复选框时，您有

  配送（daddress，dcity\u id，user）；

  ，但这些变量没有设置。如果勾选复选框，那么配送==账单，所以我认为您真正的意思是

  配送（地址，城市id，用户）；

  ，对吗

• 我不知道为什么你的复选框文本是一个实际的链接？这只会使事情复杂化-，因此单击文本将正确地切换复选框

• 你没有给我们看你的

  #submit

  按钮HTML，所以我不知道-为什么你有两个按钮？一个不够吗

将所有这些放在一起，尝试以下方式：

$('#submit').click(function(){
    var $checkbox=$('.le-checkbox'),
        address= $('#address').val(),
        city_id= $('#city_id').val(),
        daddress= $('#de_address').val(),
        dcity_id= $('#de_city_id').val(),
        user = {{Auth::user()->id}};

    // Billing address is always sent, no matter the checkbox state
    billing(address, city_id, user);

    // Shipping address depends on checkbox state
    if ($checkbox.is(':checked') {
        shipping(address, city_id, user);
    } else {
        shipping(daddress, dcity_id, user);
    }
});


$('.le-checkbox').on('change', function(){
    $("#deliveryadd").toggle();
    // .toggle() is simpler than .show() and .hide()
    // if (this.checked) {
    //     $("#deliveryadd").hide();
    // } else {
    //     $("#deliveryadd").show();
    // }
}

---

单击复选框时，您的代码正在为单击提交按钮分配事件处理程序。这意味着：

• 如果未单击复选框，则不会为这些按钮单击设置事件处理程序。因此，单击按钮不会执行任何JS提交操作，但可能会执行正常的非JS表单提交操作

• 如果您单击该复选框一次，例如勾选它，您将向

  #提交

  按钮添加一个事件处理程序。如果现在取消勾选该复选框，您将向

  #提交

  按钮添加另一个事件处理程序，并在

  #交付提交

  按钮上添加一个！取消勾选该复选框不会删除事件处理程序您之前添加了。因此，如果单击

  #submit

  ，两个处理程序都将启动。如果您再次勾选并取消勾选复选框，您只需继续堆积其他事件处理程序，最后单击按钮时，所有事件处理程序都将运行

这不是一个好方法。相反，您应该设置独立于用户交互的事件处理程序，并让代码根据复选框状态确定要执行的操作

其他一些意见：

• 要跟踪复选框上的单击，应使用

  $（'.le checkbox'）。在（'change'，function（）{

  ，而不是

  单击

• 我不知道为什么在勾选复选框时手动设置复选框状态（例如，

  $（“.le checkbox”）.attr（“checked”，“checked”）；

  ）？我不会这样做，它肯定只会导致问题，实际上不是