Question

我被困在这里。我基本上有一个设置，用户可以动态添加一个新的“item”行，每行内部都是一个复选框。选中该复选框后，DB中的值应存储为1，如果不存在，则自动存储为0（我已将所有此代码写入）。

但是，我有一个更基本的问题：当没有选中复选框时，没有发布任何内容，因此我的数组大小不是我预期的。下面是一些示例代码，它突出了我的问题：

<form action="" method="post" target="_blank">
Enter name for item 1 <input type="text" name="item_name[]" required>  <input type="checkbox" name="item_checked[]" value="yes"> <br />
Enter name for item 2 <input type="text" name="item_name[]" required>  <input type="checkbox" name="item_checked[]" value="yes"> <br />
Enter name for item 3 <input type="text" name="item_name[]" required>  <input type="checkbox" name="item_checked[]" value="yes"> <br />
<input type="submit" value="Submit">
</form>

<?php
for($i = 0; $i < count($_POST['item_name']); $i++){
    $itemName = $_POST['item_name'][$i];
    $itemChecked = "no";
    if(isset($_POST['item_checked'][$i]) && $_POST['item_checked'][$i] == "yes"){
        $itemChecked = "yes";   
    }
    echo "item_name: $itemName, i: $i, itemChecked $itemChecked <br />";
}

?>

简单来说，item_name文本框是必需的。复选框（显然）不是。我想要发生的是，如果我只检查第二个复选框，那么这是在POST数据中注册的（但是目前，当没有选中任何内容时，没有任何内容被发布，因此$i的值不同，这就是它为第一项设置。）

编辑：我添加了我的整个（简化版）代码，包括我添加和删除行的功能，以便您更好地理解问题：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".addCF").click(function(){
        $("#products").append('<tr><td>Enter name for item <input type="text" name="item_name[]"> <input type="checkbox" name="item_checked[]" value="yes"> <a href="javascript:void(0);" class="remCF tip" title="Remove this item">Remove</a></td></tr>');
    });
    $("#products").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});
</script>


<a href="javascript:void(0);" class="addCF">Add</a>


<form action="" method="post" target="_blank">

<table id="products">
<tr><td>Enter name for item <input type="text" name="item_name[]">  <input type="checkbox" name="item_checked[]" value="yes"> <a href="javascript:void(0);" class="remCF tip" title="Remove this item">Remove</a></td></tr>

</table>

<input type="submit" value="Submit">
</form>


<?php
for($i = 0; $i < count($_POST['item_name']); $i++){
    $itemName = $_POST['item_name'][$i];
    $itemChecked = "no";
    if(isset($_POST['item_checked'][$i]) && $_POST['item_checked'][$i] == "yes"){
        $itemChecked = "yes";   
    }
    echo "item_name: $itemName, i: $i, itemChecked $itemChecked <br />";
}

?>

TL，DR：该项目没有正确发布复选框。

Answer 1

由于您是动态添加和删除行，因此您基本上需要能够动态重新索引输入数组的内容。因此，每次添加或删除行时，脚本都将遍历所有当前行，并将基于零的行号指定为该行中输入的索引。

这是您可以使用的JavaScript：

$(document).ready(function(){
    $(".addCF").click(function(){

        $("#products").append('<tr><td>Enter name for item <input type="text" name="item_name[]" data-basename="item_name"> <input type="checkbox" name="" value="yes" data-basename="item_checked"> <a href="javascript:void(0);" class="remCF tip" title="Remove this item">Remove</a></td></tr>');
        updateNames();
    });
    $("#products").on('click','.remCF',function(){
        $(this).parent().parent().remove();
        updateNames();
    });

    function updateNames()
    {

        $("tr").each(function(i){ 
            $(this).children('td').each(function(){
                $(this).children('input').each(function(){
                    $(this).attr("name", $(this).data("basename")+"["+i+"]");
                });
            });
        });

    }
});

这是您更新的HTML：

<a href="javascript:void(0);" class="addCF">Add</a>


<form action="" method="post" target="_blank">

<table id="products">
<tr><td>Enter name for item <input type="text" name="item_name[0]" data-basename="item_name">  <input type="checkbox" name="item_checked[0]" data-basename="item_checked" value="yes"> <a href="javascript:void(0);" class="remCF tip" title="Remove this item">Remove</a></td></tr>

</table>

<input type="submit" value="Submit">
</form>

您的PHP不需要更改。

Live example of the HTML and javascript

Answer 2

谢谢大家。我从Patrick的javascript想法中汲取灵感，并设法以这种方式解决它。有点繁琐，但我觉得它运作正常！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".addCF").click(function(){
        $("#products").append('<tr><td>Enter name for item <input type="text" name="item_name[]"> <input class="vatcheckbox" type="checkbox" name="item_checked[]" value="" data-basename="item_checked"> <a href="javascript:void(0);" class="remCF tip" title="Remove this item">Remove</a></td></tr>');
    updateValues();
    });
    $("#products").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    updateValues();
    });



function updateValues()
    {

        $("tr").each(function(i){ 
            $(this).children('td').each(function(){
                $(this).children('input[type=checkbox]').each(function(){
                    $(this).attr("value", $(this).data("basename")+"["+i+"]");
                });
            });
        });

    }


});
</script>


<a href="javascript:void(0);" class="addCF">Add</a>


<form action="" method="post" target="_blank">

<table id="products">
<tr><td>Enter name for item <input type="text" name="item_name[]">  <input type="checkbox" class="vatcheckbox" name="item_checked[]" data-basename="item_checked" value="item_checked[0]"> <a href="javascript:void(0);" class="remCF tip" title="Remove this item">Remove</a></td></tr>

</table>

<input type="submit" value="Submit">
</form>


<?php


if(isset($_POST['item_checked'])){
    $itemsChecked = array();

    foreach($_POST['item_checked'] as $item){
        $pattern = '/(item_checked\[)([0-9]+)(\])/';
        $success = preg_match($pattern, $item, $match);
        array_push($itemsChecked, $match[2]);
    }
}


if(isset($_POST['item_name'])){

    for($i=0; $i<count($_POST['item_name']); $i++){
        echo $_POST['item_name'][$i];
        if(in_array($i, $itemsChecked)){
            echo " checked";
        }
        echo "<br />";
    }

}


?>

行按javascript计算，然后将这些行附加到相应复选框中的值字段。然后我使用一些正则表达式来提取行号，将其存储在一个数组中。然后，当我循环浏览项目名称时，我只检查当前索引是否在上述数组中，如果是，我打印＆＃34;检查＆＃34; （显然你可以在这里设置一个varibable）。谢谢大家！

Answer 3

给复选框添加不同的name属性，否则你将无法使用Javascript（你没有标记）来判断它们之间的区别，然后看看是否存在数组键提交表格：

$checkbox_map = array();
foreach($_POST as $key=>$value) {

    if (strpos($key, "item_checked") === 0) $checkbox_map[$key] = 1;

}

如果使用此方法，您可以删除复选框的name属性中的数组表示法[]。

Answer 4

添加唯一性：在php中直接添加

<form action="" method="post" target="_blank">
Enter name for item 1 <input type="text" name="item_name[0]" required>  <input type="checkbox" name="item_checked[0]" value="yes"> <br />
Enter name for item 2 <input type="text" name="item_name[1]" required>  <input type="checkbox" name="item_checked[1]" value="yes"> <br />
Enter name for item 3 <input type="text" name="item_name[2]" required>  <input type="checkbox" name="item_checked[2]" value="yes"> <br />

现在在js

$(".addCF").click(function(){
    index= $("#products [name^='item_name']").length
    $("#products").append('<tr><td>Enter name for item <input type="text" name="item_name['+index+']"> <input type="checkbox" name="item_checked['+index+']" value="yes"> <a href="javascript:void(0);" class="remCF tip" title="Remove this item">Remove</a></td></tr>');
});

您的表单项目将以与目前类似的方式提交。但在这种情况下，您不会得到索引不匹配：）

从具有相同值的多个复选框中捕获值

4 个答案: