Сохраните значение массива в jQuery из флажка

Question

Hye,

Пробовал делать это, но все еще без решения. Я хочу хранить Input checkbox с array от формы и post значение selected checkbox с использованием jQuery для цели удаления. Я не могу получить значение флажка, когда пользователь делает выбор более 1. Возможно, я знаю правильный способ хранения значения массива с помощью jQuery. Ниже приведены коды для HTML флажком:

<input type="checkbox" name="checkBox[]" id="checkBox" value='".$row['staff_id']."'> 

и это являются JQuery:

$(document).ready(function() { 
$("#del").click(function(){ 
    var del = $("#del").val(); 
    var checkBox = $("#checkBox:checked").val(); 
    $.post('admin_cuti/staff-delete.php', 
    { 
     del : del, 
     checkBox : checkBox 
    }, function(data){ 
     $("#result_del").html(data) 
     }); 
    }); 
}); 

обновление с полными кодами на мой delete.php. Пользователь может нажать на несколько флажков , чтобы удалить данные. В моем случае он может удалить только одну строку. Ниже приведены коды:

<?php 
require_once('../db_connection/connection-intra.php'); 
//Delete function 
if(isset($_POST['del'])){ 
    if(empty($_POST['checkBox'])){ 
     echo "<span style="."color:red"."><br>&nbsp;No record selected</span><p/>"; 
    } 
    elseif(isset($_POST['checkBox'])){ 
     $checkbox = $_POST['checkBox']; 
     for($i=0;$i<count($_POST['checkBox']);$i++){ 
      $del_id = $checkbox[$i]; 

      $sql = "DELETE FROM staff WHERE staff_id='$del_id'"; 
      if (mysqli_query($conn, $sql)) { 
       echo "Record deleted successfully"; 
      } else { 
       echo "Error deleting record: " . mysqli_error($conn); 
      } 
     } 
    } 
} //end of delete function 
?> 

Im все еще в процессе обучения для веб-программирования, особенно в JQuery и JavaScript. Дайте мне совет/комментарий, спасибо!

Answer 1

попробовать:

$("#del").click(function(){ 
     var del = $(this).val(); 
     var checkBox = $(this).closest('form').find('input[type="checkbox"]:checked'); 
var values = []; 
    $.each(checkBox,function(i,v){ 
     values.push($(v).val()); 
    }); 
     $.post('admin_cuti/staff-delete.php', 
     { 
      del : del, 
      checkBox : values 
     }, function(data){ 
      $("#result_del").html(data) 
      }); 
     }); 

Answer 2

У вас есть повторяющиеся идентификаторы элементов CheckBox. и селектор id выбирает только первый элемент в согласованном наборе. Вы можете лучше использовать тот же класс (скажем checkBox) для всех флажков, а затем нацелить их с помощью селектора класса:

var checkBox = $(".checkBox:checked").val(); 

вы также можете использовать атрибут, равный сектор целевых флажков на основе имени атрибута:

var checkBox = $('[name="checkBox[]"]:checked').val();