如何使用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
?>

6 个解决方案

#1

Try This.

尝试这个。

HTML CODE

HTML代码

<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

loadmore.php代码

<?php

    print_r($_POST['ids']);

?>

OUTPUT IN loadmore.php

在loadmore.php中输出

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

That's IT.

而已。

Cheers.

干杯。

#2

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调用将如下所示：

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

#3

You can use something like this before your ajax call:

你可以在你的ajax调用之前使用这样的东西：

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.

但强烈建议将复选框包装在某个div中，并在jquery选择器中表示它。因为在当前方式中，您可以选择并向服务器发送页面上的其他一些复选框。

#4

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():

使用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.

在服务器端，$ _POST [“item”]将是一个仅包含已检查值的数组。

#5

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

希望它对你有用

#6

Please try like this html:

请尝试这样的HTML：

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

ajax/ jquery:

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 :

PHP动作：

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

#1