将一组选中复选框的值获取到 JavaScript 数组中，并将它们传递给 ajax 请求答案

【问题标题】：Get values of a set of checked checkboxes in to a JavaScript array and pass them in a ajax request将一组选中复选框的值获取到 JavaScript 数组中，并将它们传递给 ajax 请求
【发布时间】：2016-06-13 08:41:01
【问题描述】：

我有一组复选框（大约 50 个），当用户选中一个或多个复选框时，我需要将选中复选框的 ID 放入 javascript 数组中。

然后我需要通过 URL（ajax 获取请求）传递它们，然后将这些值获取到 PHP 数组...

这是我到目前为止所做的......

$(document).ready(function(){
     $(".rrrr").click(function(){
          var id = $(this).attr('id');
          $("#page").load("ajax_file.php?t_id="+id)
     });
 });

这样，我只能获取和传递一个复选框 ID。如何为数组获取多个值？并在 Ajax 获取请求中传递该数组？

【问题讨论】：

用户应该点击“提交”按钮吗？当然，您不希望每次有人选中一个框时都需要一个请求。也向我们展示一些 html。
你会在哪个事件上这样做？显然不能是复选框检查事件
@EricGuan 不，用户不应该点击提交按钮。只需选中复选框，我想将页面内容过滤为复选框 ID。
@Mir 只是检查复选框....

标签： javascript php jquery arrays ajax

【解决方案1】：

您可以执行以下操作。查看演示 - Fiddle。

您将得到一个格式为cb1=false&cb2=true&cb3=true... 的字符串，然后您可以在您的php 中对其进行拆分和处理。

$(document).ready(function(){
     $(".rrrr").click(function(){
          var ids = [], idsString;
          $(".rrrr").each( function() {
              ids.push( this.id + '='+ this.checked );
          });

          idsString = ids.join('&');
          $("#page").get("ajax_file.php?" + idsString);
     });
 });

要在 PHP 中解析查询，您可以这样做：

$query = $_SERVER['QUERY_STRING'];
parse_str($query, $arr);

foreach($arr as $key => $value){
    // $key will be the checkbox id, $value will be true or false
    ...
}

【讨论】：

谢谢，您能告诉我如何将查询参数解码为 ajax_file.php 中的 PHP 数组吗？
您可以使用explode函数来拆分查询字符串，例如$pairs = explode('&', $queryString); 然后在迭代中处理每一对。检查php.net/manual/en/function.parse-str.php#76792
还要检查这个以在 PHP 中拆分字符串：stackoverflow.com/questions/5397726/…
检查答案的更新。另请注意，我将 javascript 中的 ajax 请求从 load 更改为 get。
谢谢！，您发布的其余代码都可以正常工作，但获取查询参数的部分并不像预期的那样。尽管 url 是这样的，/ajax_file.php?t_id=ddd&rrr，但我只能得到第一个值..ddd 为什么会这样？虽然我只是var_dump整个$_GET，但它只显示第一个值...

【解决方案2】：

试试这个代码

<ul id="checkbox-list">
    <li><input type="checkbox" id="num1"> some text</li>
    <li><input type="checkbox" id="num2"> some text</li>
    <li><input type="checkbox" id="num3"> some text</li>
    <li><input type="checkbox" id="num4"> some text</li>
    <li><input type="checkbox" id="num5"> some text</li>
</ul>


<div id="page"></div>

<script>
var timer;
$("#checkbox-list input").change(function(){
    window.clearTimeout(timer);
    var timer = window.setTimeout(function(){
        var arrayChecked = $('#checkbox-list input:checked').map(function() {
            return $(this).attr("id");
        }).toArray();
        $("#page").load("localhost?t_id="+arrayChecked.join(","))
    },1000);
});
</script>

【讨论】：

【解决方案3】：

使用:checkbox:checked获取复选框数据并使用each获取每个id

$(".rrrr").click(function(){
      var selectedvalue = [];
      if ($(':checkbox:checked').length > 0) {
        $(':checkbox:checked').each(function (i) {
            selectedvalue[i] = $(this).attr('id');

        });
        $("#page").load("ajax_file.php?t_id="+selectedvalue);//this will pass as string and method will be GET
        //or
        $("#page").load("ajax_file.php",{"t_id":selectdvalue});//this will pass as array and method will be POST
       }

ajax_file.php

 $checked_id = explode(",",$_GET['t_id']); //convert php array for comes as string query
 //or
 $checked_id = $_POST['t_id'];//get array for comes as array query

【讨论】：

【解决方案4】：

$(document).ready(function () {
$.fn.loadFunction = function(){

$(".rrrr").click(function(){ /*Reference from answer listed above*/
  var chkbx = [];
  $(".rrrr").each( function() {
  chkbx.push( this.id + '='+ this.checked );
});

$.ajax({
  type: "POST",
  url: url,
  data: chkbx,
  success: success,
  dataType: dataType
});
}
});

<html>
<body onload="loadFunction ()"></body>
</html>

这是通过 HTML 和 Jquery 实现的最简单示例之一。 loadFunction 也可以在 PHP 中调用。像这样：

<?php
 //all you php related codes
 $data = $_POST['data'];
 json_decode($data);
 ?>
 <script>
    $(function(){
        loadFunction();
    });
 </script>

感谢和欢呼

【讨论】：