How to get the values โ€‹โ€‹of all checked checkboxes using jQuery

I do not know how to pass the selected flag values. Any help or suggestions would be a big help for me.

Now here is my code I'm stuck in passing flag values

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 ?> 
+6
source share
6 answers

Try it.

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']); ?> 

EXIT to loadmore.php

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

This is IT.

Greetings.

+17
source

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){ } 
+5
source

You can use something like this before calling ajax:

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

But it is highly recommended that you wrap your checkboxes in some div and present it in your jquery selector. Since you can currently select and send to the server some other flags on your page.

+3
source

Put your checkboxes in the <form> 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> 

Using jQuery.serialize() :

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

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

+3
source

Get checkbox 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 this works for you.

0
source

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 actions:

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

All Articles