how to get each selected checkbox value from foreach loop using jquery

Question

I have received the value from the array then made a foreach to achieve each value from it. after adding each value to checkbox then made a onclick function to pass value to jquery function. i have receiving each value just one by one I need to collect all those value who has been selected from user by clicking on checkbox. Here is my code

$val = array();
$val =    array("Peter"=>35, "Ben"=>37, "Joe"=>43);
foreach ($val as $value){
  <input type="checkbox" id="vehicle1" name="vehicle1" value="<?php print_r($value['id']); ?>" 
  onclick="assignId(<?php echo (isset($value['id'])?$value['id']:'0') ?>)">
} 

Here is my jquery function where I need to collect all checkbox selected record and pass to controller

function assignId(val) {
        alert(val);
        $.ajax({
            url: '/path/to/file',
            type: 'POST',
            dataType: 'json',
            data: {param1: 'value1'},
            success : function(response){
                alert(response);
            }
        });
        
    }

As you can see, I just need to get all the selected value of the checkbox which is here under foreach and pass it to controller.

Answer 1

What bad thing comes up to your code is that every time you click the checkbox it will send a request to your server. So I've made you a simple solution for your problem.

in your PHP Code write this:

<form id="myForm">
    <?php
        $value =    array("Peter"=>35, "Ben"=>37, "Joe"=>43);
            var_dump($value);
            foreach ($value as $val => $data){
              echo '<input type="checkbox" id="vehicle1" name="vehicle1" value="'.$data.'" /><label>'.$val.'</label>'; 
            } 
    ?>

    <input type="submit" name="" value="submit">
</form>

Then for your Script:

     $('form').on('submit', function( event ) {

       console.log($(this).serialize());

       event.preventDefault();

        $.ajax({
           url: '/path/to/file',
           type: 'POST',
           dataType: 'json',
           data: {param1: $(this).serialize()},
           success : function(response){
            alert(response);
           }
        });
    });

I hope this will help you. Happy Coding!!!

Answer 2

All main problems of your code has been already well explained and fixed by @Emiel but always there is different approach to solve every problem. The following are steps i followed and i have decided to use only one function. In addition there might be something useful for future readers. That's why i'm writing this answer.

1. I created a button to submit the form because you cannot use onclick() function on each checkbox that will be triggered every time someone clicks on it. So create a button with onclick=assignID().

2. I fixed the approach you have used is not correct which have already been mentioned in first answer by @Emiel so better not repeat it.

3. I kept the name of checkboxes the same so that i can access them in general later using getElementsByName(vehicle1) function.

4. in assignID() I created an array to hold the value of checked boxes

5. then used JSON.stringify() to format the array as JSON data.

    <?php
        $val =array("Peter"=>35, "Ben"=>37, "Joe"=>43);
        foreach ($val as $key=>$value){//assouciative array have key and value relation
    ?>
        <input type="checkbox" id="vehicle1" name="vehicle1" value="<?php echo $value; ?>"><!--//you don't have to put onclick functio in here-->
    <?php
        } 
    ?>
    <button onclick="assignId()">Button</button><!--Its necassary to have a button to submit value-->
    <script type="text/javascript">
        function assignId() {
            var datas = [];//crating array
            var checkboxes=document.getElementsByName("vehicle1");//getting all checkboxes by name
            for(var i=0, n=checkboxes.length;i<n;i++) {//looping through each checkboxes to see if they are checked
                if(checkboxes[i].checked==true){//check if checkbox is checked
                    datas.push(checkboxes[i].value);//push the value of the checked checkbox into datas array
                }
            }
            $.ajax({
                url: 'path/to/php/file',
                type: 'POST',
                datatype:"json",
                data: {
                    param1: JSON.stringify(datas)//send the array in JSON data form
                },
                success : function(response){
                    alert(response);
                }
            });
        }
    </script>
   

Answer 3

The array that you are looping over is an associative array, which means it has key-value pairs. When you loop over such an array you can destructure the keys and values in the foreach statement. This way you can dynamically set the id, name and value of each checkbox.

Making your ids and names unique is actually quite important. Takes makes it possible to distinguish elements from one another and it makes it possible to pair each input with a value. Names can be the same though, but for now make them unique.

Wrap your <input> elements in a <form> tag. This form tag will make it easier for you to use jQuery and get all the values from each input whenever you need them. Also add a <button> to submit the form.

<?php
$data = array(
  "Peter" => 35, 
  "Ben"   => 37, 
  "Joe"   => 43
);
?>

<form id="vehicleForm">
  <?php foreach ($data as $key => $value) { ?>
    <input type="checkbox" name="vehicle-<?php echo $key); ?>" value="<?php echo $value); ?>"/>
  <?php } ?>
  <button type="submit">Submit</button>
</form>

Modify your assignId function to accept a single string which can be used for the data property on your AJAX call. This string will be generated by the jQuery after this example.

function assignIds(data) {
  $.ajax({
    url: '/path/to/file',
    type: 'POST',
    dataType: 'json',
    data: data,
    success: function(response){
      alert(response);
    }
  });
}

Listen to the submit event on the form. This event will be triggered every time you click on the submit button. Forms have a default behavior. You'll want to prevent this default behavior so you can create your own.

With the .serialize() method you extract the values from the form. The result of this method is a query string ready to send to the server. Pass that to the assignIds function and your data is sent.

$('#vehicleForm').on('submit', function(event) {
  event.preventDefault();
  var $this = $(this);
  var data = $this.serialize();
  assignIds(data)
});