CODEWITHSUNDEEP
phpjqueryajaxcheckbox
GrayFullBuster
GrayFullBuster

Reputation: 1063

How to get the values of all checked checkboxes using jQuery

I don't know how to pass the selected values of the checkboxes. Any help or suggestions will be a big help for me.

As of now here is my code I am stuck in passing the values of the checkboxes

index.php

<table>
<?php
foreach($response as $item){
    echo '<tr><td><input type="checkbox" value="' .$item['id']. '"></td><td>' . $item['name'] . '</td></tr>';
}
?>
</table>
<button type="button" class="btnadd">AddSelected</button>
<script type="text/javascript">
    $(function() {
        $('.btnadd').click(function() {
            $.ajax({
                url: 'process.php',
                type: 'post',
                data: {  }, // what should I put here to pass the value of checked checkboxes
                success: function(data) {}
            });
        });
    });
</script>

process.php

<?php
$array_ids = $_POST['ids']; // this will retrieve the id's
?>

Upvotes: 8

Views: 51790

Answers (6)

Salman Arshad
Salman Arshad

Reputation: 272066

Wrap your checkboxes in a <form> tag and name your checkboxes using PHP array notation:

<form id="form1">
<input type="checkbox" name="item[]" value="1">
<input type="checkbox" name="item[]" value="2">
<input type="checkbox" name="item[]" value="3">
</form>

The use jQuery.serialize():

 $(function () {
     $('.btnadd').click(function () {
         $.ajax({
             url: 'process.php',
             type: 'post',
             data: $("#form1").serialize(),
             success: function (data) {}
         });
     });
 });

On the server side, $_POST["item"] will be an array containing only the checked values.

Upvotes: 3

Heriyadi Setiana
Heriyadi Setiana

Reputation: 1

Please try like this html:

<td><?php echo "<input type='checkbox' name='chkimportsikep' class='form-control' value={$TABLE_NAME} checked>" ?></td>

ajax/ jquery:

$(document).ready(function(){
//handle test button click
$("button#importSikep").click(function(){
    var checkValues = $('input[name=chkimportsikep]:checked').map(function()
    {
        return $(this).val();
    }).get();

    alert(checkValues);
    $('#loading-indicator-runsikep').show();
    $.ajax({
        type:"POST",
        url:"runsikepimport.php", // your php page action
        data:{ chkimportsikep: checkValues }, // 
        cache:false,
        success: function(result){
            $('#loading-indicator-runsikep').hide();
            alert(result);
            $('.modal.in').modal('hide');
            $("#description-status-sikep").load(location.href + " #description-status-sikep");  
            //location.reload(true);
        }
    });
    return false;
});

});

PHP action :

    // don't need array variable, but your using $_POST
if(!empty($_POST['chkimportsikep'])) {
            foreach($_POST['chkimportsikep'] as $table_name) {
             // do something 
            }
}

Upvotes: 0

Kailas
Kailas

Reputation: 3231

Get the checkbox list label text 

<span> 
    <input type="checkbox" name="mycheckbox[id][]" value="0" /> 
    <label for="mycheckboxid_0">Test0</label> 
    <input type="checkbox" name="mycheckbox[id][]" value="1" /> 
    <label for="mycheckboxid_1">Test1</label> 
</span>


var chkbox = document.getElementsByName('mycheckbox[id][]');
    var vals = "";
    for (var i=0, n=chkbox .length;i<n;i++) {
        if (chkbox [i].checked) 
        {
            var label = "mycheckboxid_"+i;
            vals += " "+$('label[for="'+label+'"]').html();
        }
    }
alert(vals); // output test1 test2

hope it's work for you

Upvotes: 0

Karim
Karim

Reputation: 2628

You can use something like this before your ajax call:

var ids=[]; 
$('input[type=checkbox]:checked').each(function(){
    ids.push($(this).val());
});

But it is strongly recommended to wrap your checkboxes in some div, and represent it in your jquery selector. Because in current way you can select and send to server some other checkboxes on your page.

Upvotes: 3

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

Try This.

HTML CODE

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        $('.btnadd').click(function(){
            var checkValues = $('input[name=checkboxlist]:checked').map(function()
            {
                return $(this).val();
            }).get();

            $.ajax({
                url: 'loadmore.php',
                type: 'post',
                data: { ids: checkValues },
                success:function(data){

                }
            });
        });
    });

</script>

<input type="checkbox" name="checkboxlist" value="1" checked="checked" />
<input type="checkbox" name="checkboxlist" value="2" checked="checked" />
<input type="checkbox" name="checkboxlist" value="4" />
<input type="checkbox" name="checkboxlist" value="5" checked="checked" />
<input type="checkbox" name="checkboxlist" value="6" />​

loadmore.php CODE

<?php

    print_r($_POST['ids']);

?>

OUTPUT IN loadmore.php

Array
(
    [0] => 1
    [1] => 2
    [2] => 5
)

That's IT.

Cheers.

Upvotes: 23

Udan
Udan

Reputation: 5599

Use this function : 

 function checkboxValues() {         
     var allVals = [];
     $(':checkbox').each(function() {
       allVals.push($(this).val());
     });
     return allVals; // process the array as you wish in the function so it returns what you need serverside
  }

and your ajax call will look like this:

$.ajax({
    url: 'process.php',
    type: 'post',
    data: { checkboxValues() }, 
    success:function(data){         }

Upvotes: 5

Related Questions