javascript - JS-onClick 多个事物

Question

我有一个简单的表格，每行都有一个复选框。如果用户单击此复选框，它会使用 onClick 函数并通过 JS 将信息发送到另一个 PHP 文件以删除带有 id = $id 的 ROW，它可以正常工作。当我单击多个复选框而不刷新网站时，问题就开始了。

这就是 HTML 的样子:

echo '<td><label class="checkbox-inline"><input type="checkbox" id="check" value="'.$row["id"].'" onClick="aa()"></label></td>';

这就是 JQuery 的样子:

function aa()
{
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "delete.php?id=" + document.getElementById("check").value, false);
    xmlhttp.send(null);

    document.getElementById("d1").innerHTML=xmlhttp.responseText;;
}

最后是我的 .php 文件:

try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sql = "DELETE FROM table1 WHERE id=$id";
    $conn->exec($sql);
    echo "Record deleted successfully";
    }
catch(PDOException $e)
    {
    echo $sql . "<br>" . $e->getMessage();
    }

我仍然只是业余爱好者，所以也许我想错了，但在我看来，当用户 clck ChekBox 时，这个 JS 总是会发送 .php 信息，那么为什么它不那样发送呢？

谢谢大家的建议。

Answer 1

问题出在这里:

input type="checkbox" id="check" ...

您正在为每个复选框指定 id“check”。无论如何，这都会破坏事情，因为在 HTML 中，具有相同 ID 的页面上不应有超过一个元素。但这也意味着当你这样做时

document.getElementById("check")

它不知道你在谈论哪一行。

不需要通过id获取元素；事件对象会自动传递给点击函数，事件的目标将是复选框

function deleteItem(e) {
    var box = e.target;
    var value = box.value;
    // delete the value ...
}

有关事件参数 (e) 的信息，请参阅 http://javascript.info/tutorial/obtaining-event-object