在 JAVASCRIPT 中获取 php 选中的复选框值

Question

我是 Javascript 新手，我无法解决这个问题。我有一个复选框表单，所以我需要获取选定的值并发布到一个 php 文件。

这是脚本：

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

                    var checkedValue = null;
                    var inputElements = document.getElementsByClassName('values');
                    for(var i=0; inputElements[i]; ++i){
                        if(inputElements[i].checked){
                            checkedValue = inputElements[i].value;
                            break;
                        }
                    }

                    $.post("users_add.php", {
                        checkedValue:checkedValue

                    }, function(data) {
                        alert(data);
                    });
                });
            </script>

这里是php代码：

<td>
                                <div>
                                    <?php
                                    foreach($userProfiles as $u)
                                    {
                                        foreach($u as $x)
                                        {
                                            echo "<input type=\"checkbox\" name=\"values\"> $x";
                                            echo "<br>";
                                        }
                                    }
                                    ?>

                                </div>
                            </td>

我正在检查 print_r($_POST) 发布变量，但它没有显示任何内容。 我的 JavaScript 还好吗？

Answer 1

不要担心对 javascript 不熟悉，我们都会从某个时候开始。关于你的代码，首先你的“for循环”是保存第一个值然后跳过，我知道你还没有收到任何东西，但我猜你只会得到一个值。没有发布任何内容的最合理原因是您没有使用正确的选择器。例如：
var inputElements = document.getElementsByClassName('values');
将检索所有如下所示的 html 元素：
<input type="text" class="values" />
哦，抱歉，我刚刚注意到您确实发布了您的 html 代码，因为您已经在使用 jQuery，因此无需将其与 vanilla javascript 混合使用，这是我为您的代码找到的更正：

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

解释：
var checkedValues = [];
这样我们在 javascript 中声明一个数组，这样我们就可以访问数组方法“push”来插入满足我们条件的元素（复选框被选中）。

var inputElements = $('input[type="checkbox"]'); 这是 DOM 元素的 jQuery 选择，我们说“获取所有具有 type=checkbox 属性的输入元素。您可以在他们的官方网站上了解更多关于 jquery 选择器的信息：https://api.jquery.com/category/selectors/

inputElements.each(function () {
    if($(this).is(':checked')){
        checkedValues.push($(this).val());
    }
});

这个位做了一些事情
inputElements.each(function(){});
这将为 inputElements 选择中的“每个”元素执行一个函数。你可以在官方文档中获得更多关于 jQuery.each 的信息：https://api.jquery.com/each/

if($(this).is(':checked'))
这个 if 询问循环中的当前元素是否设置了“checked”属性。我们使用 $(this) 将我们从原始选择中获得的纯 DOM 元素转换为 jQuery 对象以使用“is”方法。

checkedValues.push($(this).val());
在这里，我们添加了一个元素的 VALUE，该元素具有选中的属性集，而不是元素，不是布尔值，而是输入的“value”属性中设置的任何内容。

任何不清楚或无法正常工作的问题，请随时提出，祝您编码愉快！ :)