如何使用jQuery获取所有选中复选框的值

Posted 2023-02-24

【中文标题】如何使用jQuery获取所有选中复选框的值

【英文标题】：How to get the values of all checked checkboxes using jQuery

【发布时间】：2013-01-06 15:18:46

【问题描述】：

我不知道如何传递复选框的选定值。任何帮助或建议都会对我有很大帮助。

到目前为止，这是我的代码，我一直在传递复选框的值

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
?>

【参考方案1】：

试试这个。

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 代码

<?php

    print_r($_POST['ids']);

?>

在 loadmore.php 中输出

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

就是这样。

干杯。

【参考方案2】：

使用这个功能：

 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
  

您的 ajax 调用将如下所示：

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

【参考方案3】：

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

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

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

【参考方案4】：

将您的复选框包装在 <form> 标记中，并使用 PHP 数组表示法命名您的复选框：

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

使用jQuery.serialize()：

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

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

【讨论】：

很好，但我的复选框来自表格中的表格 :) 无论如何，谢谢。

你可以把表格放在form标签里面。这绝对没有错。

你的jQuery.serialize()链接说serialize()不接受任何参数，所以你需要把选择器移出括号，写成$后面的括号表达式。

【参考方案5】：

获取复选框列表标签文本

<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

希望对你有用

【参考方案6】：

请尝试这样的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 动作：

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