javascript - 使用 jquery 更新数据表中的表行

Question

如何使用 jQuery ajax 来处理 checked 复选框？然后如何将 html 表中的每个 checked 复选框发送到 ajax.php？

这是我到目前为止尝试过的:

ajax.php

session_start();
if (isset($_POST['id']) && isset($_POST['to']) && isset($_SESSION['user']['id'])) {
    if (is_numeric($_POST['id']) && is_numeric($_POST['to'])) {
        include("mysql_connector.php");
        $user = $_SESSION['user']['id'];
        $sendTo = mysql_real_escape_string(trim($_POST['to']));
        foreach ($_POST['id'] as $id) {
            $id = mysql_real_escape_string(trim($id));
            mysql_query("UPDATE `email` SET status = '$sendTo' WHERE `email_id` = '$id' AND `userid` = '$user'");
        }
    }
}

Javascript:

$(".submit").click(function() {
    var id = $("#id").val();
    var to = $("#bins").val();
    var dataString = 'id=' + id + '&to=' + to;
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: dataString,
    });
});

html:

<form method="POST">
    <table id="inventory" class="table">
        <thead>
            <tr>
                <th style="text-align: center;"><a href="#" name="checkall" id="checkall" onclick="checkAll(this)" class="checkall">Check All</a></th>
                <th>Time Received</th>
                <th>Email</th>
                <th>Subject</th>
                <th>ID</th>
            </tr>
        </thead>
        <tbody>
            <tr class="email">
                <td style="text-align: center;"><input type="checkbox" name='msg[]' class="id" value="2" /></td>
                <td>1231231</td>
                <td>test</td>
                <td>test</td>
                <td>0</td>
            </tr>
            <tr class="email">

                <td style="text-align: center;"><input type="checkbox" name='msg[]' class="id" value="3" /></td>
                <td>1231231</td>
                <td>test</td>
                <td>test</td>
                <td>1</td>
            </tr>
        </tbody>

    </table>
    </br>
    <select name="bins" class="bins">
        <option value="1">Archive</option>
        <option value="2">Read</option>
        <option value="3">Unread</option>
        <option value="4">Save</option>
    </select>
    <input type="submit" name="move" value="Move" class="submit" style="width:auto;"/>
</form>

感谢阅读。

Answer 1

首先，拥有多个重复id的dom元素是无效的。如果这些复选框需要 ID，请使它们独一无二。如果他们不需要 ID，则完全删除它们。

---

要获取所有选中复选框的值列表，请执行以下操作:

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

或者您可以按名称获取不同组的复选框:

var checkedMsgVals = [];
$("input[name='msg[]']:checked").each(function() {
    checkedMsgVals.push($(this).val());
});

要将这些发送到 php，只需在调用时将它们包含在数据包中即可。为此，您需要发送一个对象，而不是查询字符串。

var dataObj = {'id': id, 'to': to, 'checkedValues': checkedMsgVals };

$.ajax({
    type: "POST",
    url: "ajax.php",
    data: dataObj,
});