使用复选框更新每个动态行的状态 [英] Update status of each dynamic row using checkbox

问题描述

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

I have a form with dynamic rows, after fetching record I want to update status of selected rows by checkbox.

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

I'm successfully getting each row checkbox values and dynamic row id in console but when trying to update values, it's updating first row only.

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的复选框来更新所选行的状态.

I want to update status of selected row by checkbox with it's respective row ID.

推荐答案

您正在寻找的是一次性更新多个复选框.因此，您需要同时存储选定的&未选中的复选框.

What you are looking for is to update multiple checkboxes in one go. So, you need to store both selected & unselected checkboxes.

您的 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')
        ));
}

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

Hope this helps. Cheers!

这篇关于使用复选框更新每个动态行的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！