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

Question

I have a set of checkboxes (around 50) and when the user checked one or more I need to get checked checkboxes' IDs into a javascript array.

And then I need to pass them through a URL (an ajax get request), and then get those values to PHP array...

Here's what I have done so far..

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

This way, I can get and pass only one checkbox ID. How to get many values to an array ? And pass that array in the Ajax get request ?

Is the user supposed to click a "submit" button? Surely you don't want a request each time someone checks a box right. Also show us some html. — Eric Guan, Mar 01 '16 at 03:51
on which event u will do this? Clearly can't be checkbox check event — Mir Gulam Sarwar, Mar 01 '16 at 03:52
@EricGuan No, user is not supposed to click a submit button. Just checking check boxes and I want to filter page content as the checkbox ID. — Tharindu Thisarasinghe, Mar 01 '16 at 03:53

score 1 · Answer 1 · answered Mar 01 '16 at 03:57

try this code

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

Nikolay Ermakov · Accepted Answer · 2016-03-01T04:46:18.973

1

You can do as below. Check demo - Fiddle.

You will get a string of format cb1=false&cb2=true&cb3=true... which you can then split and process in your 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);
     });
 });

To parse the query in PHP you can do:

$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
    ...
}

edited Mar 01 '16 at 04:46

answered Mar 01 '16 at 04:02

Nikolay Ermakov

5,031
2
11
18

Thanks, could you please show me, how to decode that query parameters into a PHP array in the ajax_file.php ? – Tharindu Thisarasinghe Mar 01 '16 at 04:10
1

You can use `explode` function to split the query string, e.g. `$pairs = explode('&', $queryString);` and then process each pair in an iteration. Check http://php.net/manual/en/function.parse-str.php#76792 – Nikolay Ermakov Mar 01 '16 at 04:13
Also check this one for splitting string in PHP: http://stackoverflow.com/questions/5397726/parse-query-string-into-an-array – Nikolay Ermakov Mar 01 '16 at 04:18
Check the update to the answer. Also notice I changed the ajax request in javascript from `load` to `get`. – Nikolay Ermakov Mar 01 '16 at 04:46
Thanks!, the rest of the code you posted is working, but the part that getting Query Parameters is not as it's supposed to be. Eventhough url is like this, `/ajax_file.php?t_id=ddd&rrr`, I can get only the first value.. `ddd` Why is that ? Although I just `var_dump` the entire `$_GET`, it only shows the first value... – Tharindu Thisarasinghe Mar 01 '16 at 05:13
The url shouldn't be like that. It should go in pairs, i.e. `...t_id=true&rrr=false`. Can you show the actual query string (`idsString`) that is appended to the `ajax_file.php?` ? – Nikolay Ermakov Mar 01 '16 at 05:16
Ah I forgot to mention that, I slightly changed your code. I don't need true or false, Just IDs are enough, But, is TRUE or FALSE needed to get those values using $_GET ? – Tharindu Thisarasinghe Mar 01 '16 at 05:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104952/discussion-between-nikolay-ermakov-and-tharindulucky). – Nikolay Ermakov Mar 01 '16 at 05:25

Jack jdeoel · Answer 3 · 2016-03-01T04:38:03.920

use :checkbox:checked to get checked box data and to get each id with using each

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

Amulya Kashyap · Answer 4 · 2016-03-01T04:07:19.770

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

This one of simplest example via HTML & Jquery. loadFunction can be called in PHP too. Like This :

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

Thanks & Cheers

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

4 Answers4