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

时间:2016-04-11 23:31:35

标签: javascript php post checkbox

我是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好吗?

1 个答案:

答案 0 :(得分:0)

不要担心是javascript的新手,我们都会在某个时候开始。关于你的代码,首先你的“for cycle”是保存第一个值然后跳过,我知道你还没有收到任何东西,但我猜你只会获得一个值。没有发布任何内容的最合理原因是您没有使用正确的选择器。例如:
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选择中执行“for each”元素的功能。您可以在官方文档中获取有关jQuery.each的更多信息:https://api.jquery.com/each/

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

checkedValues.push($(this).val());
这里我们添加一个元素的VALUE,该元素具有checked属性集,而不是元素,而不是boolean,但是在输入的“value”属性中设置了什么。

任何不清楚或不起作用的东西都可以随意提问,并且编码愉快! :)