将一组选中的复选框的值获取到 JavaScript 数组中，并在 ajax 请求中传递它们 - Get values of a set of checked checkboxes in to a JavaScript array and pass them in a ajax request

Get values of a set of checked checkboxes in to a JavaScript array and pass them in a ajax request

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

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

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

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

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

您可以执行以下操作。检查演示 - 小提琴。

您将获得一串格式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
    ...
}

试试这段代码

<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>

使用 :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

$(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>

谢谢和干杯