使用复选框更新每个动态行的状态答案

【问题标题】：Update status of each dynamic row using checkbox使用复选框更新每个动态行的状态
【发布时间】：2020-02-28 22:39:27
【问题描述】：

我有一个带有动态行的表单，在获取记录后，我想通过复选框更新所选行的状态。

我在控制台中成功获取了每行复选框值和动态行 ID，但是当尝试更新值时，它只更新第一行。

HTML：

  <button type="button" class="btn btn-info" id="update_status_btn">Update Status</button>

获取记录：

success: function(data){
      var trHTMLr = '';
       $.each(data,function(i,row){
       trHTMLr += '<tr>' + 
                     '<td><input type="text" name="first_name" class="form-control text-center" value="' + row.first_name + '" /></td>' + 
                     '<td><input type="checkbox" name="status" class="form-control text-center updatestatusclass" data-id="' + row.id + '" value="' + 'YES' + '"/></td>' + 
                  '</tr>';
});
$('#mytable').append(trHTML);
}

更新状态：

   $("#update_status_btn").click(function(e) {
    e.preventDefault();
      $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });
      var eachrow_value=[];
      $('.updatestatusclass').each(function(){
      if($(this).is(":checked"))
      {
      eachrow_value.push($(this).val());  
      }
      });
      eachrow_value=eachrow_value.toString();
       var row_id = $('.updatestatusclass').attr('data-id');
      $.ajax({
       url: "{{ url('/updatestatus') }}",
    method: 'POST',
      data: {id: row_id, status: eachrow_value},
   dataType: 'json',
   success: function (response) {
           alert('Updated Successfully!');
          },
          error: function (response) {
            alert("Not Updated, Try again.");
          }
      });
  });

控制器：

  if ($request->ajax()) {
            $stat = Services::where('id', $request->get('id'))
                ->update(array(
                    'status' =>  $request->get('status')
                ));
            return Response::json($stat);
        }

我想通过复选框更新所选行的状态及其各自的行 ID。

【问题讨论】：

标签： javascript jquery ajax laravel

【解决方案1】：

您正在寻找的是一次更新多个复选框。因此，您需要存储选中和未选中的复选框。

你的 jQuery

let checkedIds = [];
let unCheckedIds = [];
$('.updatestatusclass').each(function () {
    if ($(this).is(":checked")) {
        checkedIds.push($(this).attr('data-id'));
    } else {
        unCheckedIds.push($(this).attr('data-id'));
    }
});

$.ajax({
    url: "{{ url('/updatestatus') }}",
    method: 'POST',
    data: {
        checkedIds: checkedIds,
        checkedIdStatus: 'active', //do your thing
        unCheckedIds: unCheckedIds,
        unCheckedIdStatus: 'inactive', //do your thing
    },
    dataType: 'json',
    success: function (response) {
        alert('Updated Successfully!');
    },
    error: function (response) {
        alert("Not Updated, Try again.");
    }
});

在您的控制器

中

if ($request->ajax()) {
    Services::whereIn('id', $request->get('checkedIds'))
        ->update(array(
            'status' =>  $request->get('checkedIdStatus')
        ));
    Services::whereIn('id', $request->get('unCheckedIds'))
        ->update(array(
            'status' =>  $request->get('unCheckedIdStatus')
        ));
}

希望这会有所帮助。干杯！

【讨论】：