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
– Eric Guan, Commented Mar 1, 2016 at 3:51
on which event u will do this? Clearly can't be checkbox check event — Mir Gulam Sarwar
– Mir Gulam Sarwar, Commented Mar 1, 2016 at 3: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
– Tharindu Thisarasinghe, Commented Mar 1, 2016 at 3:53

Nikolay Ermakov · Accepted Answer · 2016-03-01 04:46:18Z

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 1, 2016 at 4:46

answered Mar 1, 2016 at 4:02

Nikolay Ermakov

5,0712 gold badges14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Tharindu Thisarasinghe Over a year ago

Thanks, could you please show me, how to decode that query parameters into a PHP array in the ajax_file.php ?

Nikolay Ermakov Over a year ago

You can use explode function to split the query string, e.g. $pairs = explode('&', $queryString); and then process each pair in an iteration. Check php.net/manual/en/function.parse-str.php#76792

Nikolay Ermakov Over a year ago

Also check this one for splitting string in PHP: stackoverflow.com/questions/5397726/…

Nikolay Ermakov Over a year ago

Check the update to the answer. Also notice I changed the ajax request in javascript from load to get.

Tharindu Thisarasinghe Over a year ago

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

|

Shayan · Accepted Answer · 2016-03-01 03:57:28Z

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>

Jack jdeoel · Accepted Answer · 2016-03-01 04:38:03Z

1

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

edited Mar 1, 2016 at 4:38

answered Mar 1, 2016 at 4:11

Jack jdeoel

4,5886 gold badges28 silver badges57 bronze badges

Comments

Amulya Kashyap · Accepted Answer · 2016-03-01 04:07:19Z

0

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

edited Mar 1, 2016 at 4:07

answered Mar 1, 2016 at 4:00

Amulya Kashyap

2,3731 gold badge20 silver badges26 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related