Javascript 如何在手动投递中获取所有复选框

有点背景，我主要在.Net/C工作，一生中从未做过任何PHP，我的公司给了我一个现有的PHP代码，并要求我添加一些功能

我需要处理的网页是一个餐饮系统。当人数发生变化时，页面将重新计算总价。如果菜单中的每一项都有相似的价格，那么这就很好了

function RefreshPrice() {
        menuid = getQueryString('menuid');
        $.ajax({
            url: "ajax.php",
            type: "POST",
            data: {
                refreshprice: "refreshprice",
                menuid: menuid,

            },
            success: function(data, textStatus, jqXHR) {

            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert("Error");
            }
        });

    }

但现在有些项目的成本比其他项目高，所以我需要重新计算每个项目的选择。我试图使用一个隐藏字段来存储该商品的附加价格

<input type="checkbox" class="validate-checkbox" item-name="<?php echo $item["Name"];?>"
                                  name="menuitem[]" value="<?php echo $item["Id"];?>">
<input type="hidden" class="addprice" name="addprice" value="<?php echo $item["AddPrice"];?>">

---

如果这是一个重复的问题，很抱歉，但我找到的大多数答案都是使用表单提交POST方法，并使用

$\u POST[“addprice”]

，但这是手动构建ajax POST。

我认为在隐藏表单字段中存储值不是一个好主意。因为出于安全原因，用户可以修改您的旧值

---

我的建议是，您应该将表单值发送到PHP并进行DB调用，然后再次比较这些值。如果发现更改，则更新值，否则保留它

在做了一些研究和大量测试之后，我找到了一种实现您所期望的方法，所以这里有一个例子

我已经在我正在构建的一个应用程序上测试了这个例子，所以这个例子不会使用你的代码，但是方法是一样的，你只需要调整它来使用你的代码

好的，首先让我们创建所需的表并用几行填充它

PHP

// Establish Connection (change the connection details if necessary)
$mysqli = new mysqli ('localhost','root','','test');

// Create table
mysqli_query($mysqli, "CREATE TABLE IF NOT EXISTS permissions(
    id INT(11) AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    description VARCHAR(255) NOT NULL
)");

// Populate table
mysqli_query($mysqli, "INSERT INTO permissions (
    name,
    description
    ) VALUES (
        'manage_users', 
        'Can add/edit users'
        ),
        ('permission_plus',
        'Can manage roles/permissions & access logs'
        )");
    ?>

因此，在本例中，我将尝试为我的web office创建一个新角色，并为该角色分配一些现有权限，为了实现这一点，我们需要创建一个表单，该表单将显示我们刚刚创建的表中的所有现有角色

HTML

<!--Make sure to include JQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>

<div id="addRole">
    <form method="POST" id="addroles">
        <input type="text" id="rolename" placeholder="Role Name" />
        <input type="text" id="role_description" placeholder="Role Description" />
        <hr /><span class="title">Include Permissions</span>
        <div id="checks">
            <?php
            $query = mysqli_query($mysqli, "SELECT * FROM permissions");
            while($row = $query->fetch_assoc()){
                $permid = $row['id'];
                $permname = $row['name'];
                $permdesc = $row['description'];
                echo "<label class='checks' title='$permdesc'>
                <input type='checkbox' class='selected' data-id='$permid'/>
                 $permname</label>";
            }
            ?>
        </div>
        <input type="submit" value="Add Role" />
    </form>
</div>

如您所见，这里的脚本说，提交表单后，首先阻止表单使用默认函数，并将表单字段中的值分配给此特定变量，当涉及到复选框时，创建一个数组，然后为每个选中的复选框-将存储在数据id中的值推送到先前创建的数组中，然后启动AJAX并将所有变量传递给服务器，在服务器处理数据之后，请告诉我们它说了什么

addrole.php

$mysqli = new mysqli ('localhost','root','','test');

$permissions = $_POST['permissions'];
foreach($permissions as $permission){
    echo $permission.' ';
}

服务器使用

foreach

函数分解传递的选中复选框数组，并回显每个选中复选框的数据id中存储的值，我们可以在浏览器控制台中看到结果

为了这个例子的外观，这里有一些CSS

CSS

#addRole{
    background-color: rgb(241, 241, 241);
    position: relative;
    width:30%;
    padding:20px;
}
#addRole input[type='text']{
    width:80%;
    height:40px;
    margin:5px 5px 5px 0px;
    position: relative;
    left:50%;
    transform: translate(-50%);
    text-align: center;
    outline:none;
}#addRole input[type='submit']{
    width:80%;
    height:40px;
    margin:5px 5px 5px 0px;
    position: relative;
    left:50%;
    transform: translate(-50%);
    text-align: center;
    outline:none;
}
#addRole form hr{
    width:30%;
    margin-bottom: 20px;
    margin-top: 20px;
}
.checks{
    display: inline-block;
    padding:20px;
    text-indent: -20px;
    background-color: rgb(252, 252, 252);
    border:1px solid rgb(238, 238, 238);
    margin: auto;
}
#checks{
    position: relative;
    left:50%;
    transform: translate(-50%);
    margin:10px;
    display: flex-box;
    text-align: center;
}
#addRole input[type='checkbox']{
    width:20px;
    height:20px;
    margin:0px 0px 0px 20px;
    outline:none;
    text-align: center;
}
.title{
    position:relative;
    left:50%;
    transform: translate(-50%);
    text-align: center;
    display: inline-block;
    font-size: 20px;
    margin:auto;
    margin-bottom: 10px;
}

---

我相信您已经意识到，根据可以在客户端更改的数据计算价格是一个安全问题。另外，如果服务器端只是为了添加值，为什么不直接在javascript中处理它呢。 无论哪种方式，下面的代码都应该收集选中项目的数据值

<input type="checkbox" class="validate-checkbox priceItems" item-name="<?php echo $item['Name'];?>" name="menuitem[]" value="<?php echo $item['Id'];?>" data-price="<?php echo $item['AddPrice'];?>">

---

数据将以服务器端的$_POST[“addprice”]格式显示。那很好。但我认为主要的问题是Javascript代码只会从一个隐藏字段中收集价格。或者实际上，它们都没有，因为

addprice:checked

没有任何意义，因为隐藏字段无法检查，而且它无论如何都不是有效的类选择器。您缺乏PHP知识与此无关，问题似乎在于使用javascript/jQuery和选择器。我建议您在复选框输入中使用data~atribute例如

data price=“$item['AddPrice]”“

，然后定义复选框的id

id=“menuitem[]”

所以最后您可以像这样定义addvalue变量

$（#menuitem）.data（'price'）

，我可以试着为你写代码，你认为你可以这样整理它，我习惯于写ajax代码，希望你不介意it@ADyson我尝试了

$（“.addprice”）.val（）

但是是的，正如您所说，它只收集表单中的第一个字段。因此，我试图在这行中传达我想要的内容，也许我应该使用伪代码来强调我没有收集

addprice

字段的工作代码。您需要循环检查所有复选框，找到每个复选框的相关隐藏字段，并将ID和价格一起放入一个对象中，并将它们添加到数组中，然后将其提交到服务器。（因为如果您不提交ID，服务器将如何知道哪个价格与哪个项目相关？）。我认为最好以JSON的形式发送这些内容。要么这样，要么就

.serialize（）

整个表单，让jQuery以合理的格式发送数据。然后在服务器端，您可以

var\u dump（$\u POST）

调试您收到的结构。@ADyson是的，用户不会修改这些字段。我将更改处理此重新计算的方法。我将使用您的建议，收集检查项目的id，并处理附加价格服务器端。谢谢这还是不行的。说真的，测试你的代码而不是猜测。现在你已经完全删除了AJAX部分，这就是问题的关键所在！完成。这与答案没有直接关系，但一般来说：永远不要让你的web应用以root用户身份登录数据库。Root可以做任何它喜欢做的事情，所以如果你的代码中有未被发现的安全漏洞，这会让你的数据库对黑客开放。专门为此应用程序创建一个单独的用户帐户，该应用程序只有工作所需的权限。在开发过程中，甚至不要将根帐户用作快捷方式，因为您还需要测试您的帐户权限-否则，当您上线时，可能会出现与用户帐户设置相关的意外错误。谢谢，谢谢您提供的信息，我从未想过您用于连接数据库的用户的重要性

#addRole{
    background-color: rgb(241, 241, 241);
    position: relative;
    width:30%;
    padding:20px;
}
#addRole input[type='text']{
    width:80%;
    height:40px;
    margin:5px 5px 5px 0px;
    position: relative;
    left:50%;
    transform: translate(-50%);
    text-align: center;
    outline:none;
}#addRole input[type='submit']{
    width:80%;
    height:40px;
    margin:5px 5px 5px 0px;
    position: relative;
    left:50%;
    transform: translate(-50%);
    text-align: center;
    outline:none;
}
#addRole form hr{
    width:30%;
    margin-bottom: 20px;
    margin-top: 20px;
}
.checks{
    display: inline-block;
    padding:20px;
    text-indent: -20px;
    background-color: rgb(252, 252, 252);
    border:1px solid rgb(238, 238, 238);
    margin: auto;
}
#checks{
    position: relative;
    left:50%;
    transform: translate(-50%);
    margin:10px;
    display: flex-box;
    text-align: center;
}
#addRole input[type='checkbox']{
    width:20px;
    height:20px;
    margin:0px 0px 0px 20px;
    outline:none;
    text-align: center;
}
.title{
    position:relative;
    left:50%;
    transform: translate(-50%);
    text-align: center;
    display: inline-block;
    font-size: 20px;
    margin:auto;
    margin-bottom: 10px;
}

<input type="checkbox" class="validate-checkbox priceItems" item-name="<?php echo $item['Name'];?>" name="menuitem[]" value="<?php echo $item['Id'];?>" data-price="<?php echo $item['AddPrice'];?>">

var prices = $('.priceItems:checked').map(function() { 
                return $(this).data('price'); 
            }).get();