how to pass values of several checkboxes with jquery ajax

Question

To get the value from several checkboxes i use this code:

 <form class="myform" method="post" action="">
        <input type="checkbox" class="checkbox" value="11" /><br>
        <input type="checkbox" class="checkbox" value="22" /><br>
        <input type="submit" value="Go" />
  </form>

The ajax:

$(document).ready(function(){
            $('.myform').on('submit', function(e){
                //Stop the form from submitting itself to the server.
                e.preventDefault();
                var checkboxvalue = $('.checkbox').val();
                $.ajax({
                    type: "POST",
                    url: '',
                    data: {checkboxvalue: checkboxvalue},
                    success: function(data){
                        $('.response').html(data);
                    }
                });
            });
        });

The php:

   if($_SERVER['REQUEST_METHOD'] == "POST") {  

      $value = false;
      if(isset($_POST['checkboxvalue'])){
         $value = $_POST['checkboxvalue'];
      }

      echo 'The value was: ' . $value;
      exit;
   }

The problem is: when checking the second checkbox, i get the value 11 , thats the value of the first checkbox. When clicking both checkboxes, i also get the value 11

What i want to achieve: if i check the first checkbox, het should give me 11 as output. Checking the second checkbox, he should output 22 as value. And when checking both checkboxes, he should output 11 and 22 as value.

How can i achieve this?

Answer 1

USE THIS

$(document).ready(function(){
   $('.myform').on('submit', function(e){
        e.preventDefault();
        var checkboxvalue =  [];    
        $("input[type=checkbox]:checked").each(function(i){
          checkboxvalue.push( i.value );
        });
      $.ajax({
                type: "POST",
                url: '',
                data: {checkboxvalue: checkboxvalue},
                success: function(data){
                    $('.response').html(data);
                }
            });
        });
    });

the php

 if($_SERVER['REQUEST_METHOD'] == "POST") {  
  $value = false;
  /* the check box value in array*/
  print_r($_POST['checkboxvalue']);
  if(isset($_POST['checkboxvalue'])){
     $value = $_POST['checkboxvalue'];
  }      
  exit;
  }

Answer 2

You need to added name attribute to check

<input type="checkbox" class="checkbox" name="value-check" value="11" /><br>

var checkboxvalue = [];
        $.each($("input[name='value-check']:checked"), function(){            
            checkboxvalue.push($(this).val());
        });

Answer 3

You need to loop through the checkbox which are selected, problem with your code is it is always giving you the value of first selected checkbox always

 var chkArray = []; $(".checkbox:checked").each(function() { chkArray.push($(this).val()); }); var selected; selected = chkArray.join(',') ; console.log(selected) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div><input type="checkbox" value="1" class="checkbox"> Value 1</div> <div><input type="checkbox" value="2" class="checkbox" checked="checked"> Value 2</div> <div><input type="checkbox" value="3" class="checkbox"> Value 3</div> <div><input type="checkbox" value="4" class="checkbox"checked="checked"> Value 4</div> <div><input type="checkbox" value="5" class="checkbox"> Value 5</div> 

Answer 4

You need to create an array and fill with the values, if checkbox has been checked.

$(document).ready(function(){
        $('.myform').on('submit', function(e){
            //Stop the form from submitting itself to the server.
            e.preventDefault();
          var values = [];
          $('.checkbox').each(function() {
            if ($(this).is(':checked')) {
              values.push($(this).val());
            }

          });
          console.log(values);
        });
    });

See Codepen