douchou8935
douchou8935
2013-01-23 07:48
浏览 346

如何使用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条回答 默认 最新

  • douzi1991
    douzi1991 2013-01-23 07:53
    已采纳

    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.

    点赞 评论
  • duanque19820925
    duanque19820925 2013-01-23 07:55

    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){         }
    
    点赞 评论
  • dssqq82402
    dssqq82402 2013-01-23 08:02

    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.

    点赞 评论
  • dongliao4353
    dongliao4353 2013-01-23 08:05

    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.

    点赞 评论
  • dsm1998
    dsm1998 2014-01-02 10:08

    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

    点赞 评论
  • dounai9592
    dounai9592 2016-08-09 04:18

    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 
                }
    }
    
    点赞 评论

相关推荐