通过jquery删除多个用户复选框

Question

I listed my friends info(usernames with avatars) in phpbb3 custom page and I need to delete multiple users by checking checkboxes.

Here is my source code, but I don't know why it is not working.

<form method="post" action="delete.php" class="form-inline">
<!-- BEGIN friends -->
<ul class="friends">
    <li id="{friends.F_ID}.li">
        <div class="media-group">
                <a class="pull-left" title="{friends.F_USERNAME}">
                    <img class="media-object img-circle img-avatar" src="{friends.F_AVATAR}">
                </a>

            <div style="width:30px; height:30px;">
            <input type="checkbox" name="friends[]" id="{friends.F_ID}">
            </div>

            <a href="#"><h4 class="media-heading">{friends.F_USERNAME}</h4></a>
            <span class="span-block">123..</span>
            <span class="span-block">{LAST_VISIT_DATE}</span>
        </div>
    </li>
</ul>
<!-- END friends -->
<button id="delete_friends" name="delete_friends" type="submit">Delete Friends</button>
</form>

And my javascript is this:

<script>
$("#delete_friends").click(function(){

var data = {'friends[]' : []};
$(":checked").each(function() {
 data['friends[]'].push($(this).val());
});

if (confirm("Are you sure you want to delete "+data+"?"))
{
    $("#loading_full").fadeIn('fast');
    $.post("delete.php", { user_id:'<?php echo $user_id; ?>' , friend_username : data })
    .done(function(data) {
    alert(data);
        if (data.toLowerCase().indexOf("success delete") >= 0){
            $("#"+data+"li").fadeOut('fast');
            $("#loading_full").fadeOut('fast');
        }
    })
    .fail(function(){
     });
     return false;
}
});
</script>

Answer 1

the way you are initializing the arrays i think is not good, you can do it like:

var data = {'friends' : []};

this is beacause anyway you are set 'friends' as an array;

then you are pushing data['friends[]'].push("some value");

i think is better if you something like:

var friends = new Array();
$(":checked").each(function() {
 friends.push($(this).val());
});

var data = {'friends' : friends};

Answer 2

I tried to clear the concept how to get values from multiple selected check box below. I hope that will help you.

In HTML use

<input type="checkbox" name="friends[]" value="{friends.F_ID}" id="{friends.F_ID}">

in the place of <input type="checkbox" name="friends[]" id="{friends.F_ID}">

HTML:

<form method="post" action="delete.php" class="form-inline">
<!-- BEGIN friends -->
<ul class="friends">
<li id="{friends.F_ID}.li">
    <div class="media-group">
            <a class="pull-left" title="{friends.F_USERNAME}">
             <img class="media-object img-circle img-avatar" src="{friends.F_AVATAR}">
            </a>

        <div style="width:30px; height:30px;">
        <input type="checkbox" name="friends[]" value="{friends.F_ID}" id="{friends.F_ID}">
        </div>

        <a href="#"><h4 class="media-heading">{friends.F_USERNAME}</h4></a>
        <span class="span-block">123..</span>
        <span class="span-block">{LAST_VISIT_DATE}</span>
    </div>
</li>
</ul>
<!-- END friends -->
<button id="delete_friends" name="delete_friends" type="submit">Delete Friends</button>

PHP Submit Code :

if(isset($_POST["submit"]) && $_POST["submit"]!="")
{
    $usersCount = count($_POST["friends"]);
    for($i=0;$i<$usersCount;$i++)
    {
       //mysql_query  // friends.F_ID = $_POST["friends"][$i]
    }
}