使用jquery [duplicate]将选中的复选框ID发送到数据库

Question

This question already has an answer here:

• How to send the values of an array of checkboxes through Ajax using jQuery? 3 answers

I have a checklist that users need to check more than one checkbox and then I should calculate the total price of each checkbox and display it. The problem is I should insert the checked checkbox into the database. So when I am using isset() function I am having an error. So I am thinking to use jquery instead and sending the ids checked to the database but I don't know how to do it.

    <form method="post" action="#">
            <div class="agileinfo_services_grids">
                <?php 
                    $sql = "SELECT * FROM services";
                    $result = mysqli_query($connection, $sql);
                    $num_rows = mysqli_num_rows($result);

                    if($num_rows > 0) {
                        while ($row = mysqli_fetch_assoc($result)) {

                            $price = $row['price'];
                            $id = $row['id'];
                            echo "<div class='col-md-4 agileinfo_services_grid'>
                                    <div class='agileinfo_services_grid1'>
                                        <div class='price'><h3>$" . $row['price'] . "</h3></div>
                                        <h4>" . $row['title'] . "</h4>
                                        <p>" . $row['details'] . "</p>
                                        <div class='agileinfo_services_grid1_pos'>
                                            <input id='$id' name:'checkbox[]' class='icon-checkbox my-activity' type='checkbox' value='$price'/>
                                            <label for='$id'>
                                                <span class='glyphicon glyphicon-unchecked unchecked'></span>
                                                <span class='glyphicon glyphicon-check checked'></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>";            
                        } 
                    } else {
                        echo "No Current Services Available";
                    }
                ?>
            </div>
            <div class="total">
            <div class="total-left">
                <p>Total :<span>$<input type="text" id="amount" readonly></span>
            </div>
            <div class="total-right">
                <input type="submit" value="Check Out" name="submit">
            </div>
            <div class="clear"> </div>
        </div>
        </form>

below is the function that I used to calculate the total price of the checked boxes. How can I modify it to send to the database the ids of the checked boxes as well.

<script type="text/javascript">
    $(document).ready(function() {        
        $(".my-activity").click(function(event) {
            var total = 0;
            $(".my-activity:checked").each(function() {
                total += parseInt($(this).val());
                $.post("services.php", {id: this.id, checked:this.checked});
            });

            if (total == 0) {
                $('#amount').val('');
            } else {                
                $('#amount').val(total);
            }
        });
    });    
</script>

</div>

Answer 1

Follow this steps to send selected ids to database.

HTML:

<div id="checkboxes">
    <input id="chkbx_0" type="checkbox" name="c_n_0" checked="checked" />Option 1
    <input id="chkbx_1" type="checkbox" name="c_n_1" />Option 2
    <input id="chkbx_2" type="checkbox" name="c_n_2" />Option 3
    <input id="chkbx_3" type="checkbox" name="c_n_3" checked="checked" />Option 4
</div>

Use this jquery script:

var selected_ids = [];
$('#checkboxes input:checked').each(function() {
    selected_ids.push($(this).attr('id'));
});

/* to sending ids to database using ajax */
$.ajax({  
    type: 'POST',  
    url: 'test.php', 
    data: { selected_ids: selected_ids },
    success: function(response) {
        alert(response);
    }
});