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?

There will be more that one element with class checkbox so look at jQuery each() — RiggsFolly
– RiggsFolly, Commented Feb 19, 2019 at 11:37

Sandeep K. · Accepted Answer · 2019-02-19 12:03:28Z

3

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

edited Feb 19, 2019 at 12:03

answered Feb 19, 2019 at 11:49

Sandeep K.

7616 silver badges19 bronze badges

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

3 Comments

mudraya Over a year ago

i tried this but is still not working for me.Can you give me a complete working code please? So the form, js and php? I am not so familiar with ajax

mudraya Over a year ago

unfortunately, still no echo's

Sandeep K. Over a year ago

you have to check console.

Shibon · Accepted Answer · 2019-02-19 11:40:57Z

0

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());
        });

answered Feb 19, 2019 at 11:40

Shibon

1,5502 gold badges9 silver badges22 bronze badges

4 Comments

mudraya Over a year ago

i tried this and now the echo is : The value was: Array

Shibon Over a year ago

@mudraya yes it is an array

Shibon Over a year ago

you can use checkboxvalue.join(", ") to convert it to coma seperate string

Shibon Over a year ago

or you can use implode(" ",$value); in php

Prakash Saripaka · Accepted Answer · 2019-02-19 11:42:36Z

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>

Mikel Wohlschlegel · Accepted Answer · 2019-02-19 11:48:33Z

0

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

answered Feb 19, 2019 at 11:48

Mikel Wohlschlegel

1,4741 gold badge13 silver badges25 bronze badges

Collectives™ on Stack Overflow

how to pass values of several checkboxes with jquery ajax

4 Answers 4

3 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related