时间戳

首页 > 解决方案 > 选中复选框时调用 Ajax 或提交按钮

javascript - 选中复选框时调用 Ajax 或提交按钮

问题描述

我有以下 PHP while 循环，它将数据显示为复选框。复选框可以是多个或一个。

<?php
$supplier = new Admin;
$supplier->rowQuery("SELECT * FROM supplier");

echo '<form id="formId">';
    while ( $data = $supplier->result->fetch_assoc()) {        

        $sid          =  (int) $data['sid'];
        $supplierName = output($data['supplierName']);

        echo '<label class="checkbox-inline">';
            echo "<input type='checkbox' name='sid[]' data-sid='$sid' value='$sid' class='supplierClass'> $supplierName";
        echo '</label>';
    }
echo '<input type="hidden" name="submit" value="supplier" class="clickBtn">';
echo '</form>';
?>

现在我想在至少一个复选框或多个复选框被选中时调用 Ajax。为此，我有以下 Javascrpt：

$('.supplierClass').click(function() {
var sid = $(this).data('sid');
if(this.checked){
   // $("input[type=submit]").trigger(".clickBtn");
   $('.clickBtn').trigger();
   $('#formId').submit(function() {
      $.ajax({
        url         :   'process/get-vehicle.php',
        type        :   'POST',
        dataType    :   'html',
        data        :   {
          sid   :  sid,
        },
        beforeSend  :   function () {
            $('.allVehicle').html('Please wait...');
        },
        success     :   function ( result ) {
            $('.allVehicle').html(result);
        }
    });
  });
}
});

但它不被称为 Ajax :(

总体的目标

您可以看到我已将复选框名称设置为arraysid[]。因为我需要将所有复选框选中的数据作为 PHP 文件中的数组获取。

那么，检查一个或多个复选框时如何调用Ajax？请注意：在 PHP 文件中，我想获取所有复选框或一个复选框值。

我的想法：

我认为应该有一个隐藏的提交按钮。当我点击任何复选框时，它应该按下 jQuery 的隐藏按钮来调用 Ajax。

标签： javascriptphpjqueryajaxcheckbox

解决方案

移除提交事件，使用更改事件，获取所有选中的 sid

$('.supplierClass').change(function() {

if( $('.supplierClass:checked').length){
 var sids = [];
 $('.supplierClass:checked').each(function(i,v) {//get all the sids of the elements checked
     sids.push($(v).val());
  });
      $.ajax({
        url         :   'process/get-vehicle.php',
        type        :   'POST',
        dataType    :   'html',
        data        :   {
          sid   :  sids,
        },
        beforeSend  :   function () {
            $('.allVehicle').html('Please wait...');
        },
        success     :   function ( result ) {
            $('.allVehicle').html(result);
        }
    });
}
});

推荐阅读