读取动态添加的复选框值

Question

<head>
    <title>jQuery Add & Remove Dynamically Input Fields in PHP</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
    <h1>jQuery Add & Remove Dynamically Input Fields in PHP</h1>
    <form method="post" action="">
        <div class="form-group fieldGroup">
            <div class="input-group">
                <input type="text" name="phno[]" class="form-control" placeholder="Enter No" />
                <input type="checkbox" name="cdr[]" class="checkbox-inline cdr" />
                <input type="checkbox" name="caf[]" class="checkbox-inline caf" />
                <div class="input-group-addon">
                    <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
                </div>
            </div>
        </div>
        <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
    </form>
    <!-- copy of input fields group -->
    <div class="form-group fieldGroupCopy" style="display: none;">
        <div class="input-group">
            <input type="text" name="phno[]" class="form-control" placeholder="Enter No" />
            <input type="checkbox" name="cdr[]" class="checkbox-inline cdr" />
            <input type="checkbox" name="caf[]" class="checkbox-inline caf" />
            <div class="input-group-addon">
                <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        //group add limit
        var maxGroup = 10;

        //add more fields group
        $(".addMore").click(function() {
            if ($('body').find('.fieldGroup').length < maxGroup) {
                var fieldHTML = '<div class="form-group fieldGroup">' + $(".fieldGroupCopy").html() + '</div>';
                $('body').find('.fieldGroup:last').after(fieldHTML);
            } else {
                alert('Maximum ' + maxGroup + ' groups are allowed.');
            }
        });

        //remove fields group
        $("body").on("click", ".remove", function() {
            $(this).parents(".fieldGroup").remove();
        });

    });
    </script>
</body>

在上面的代码中，我得到了复选框的值，但与文本字段的值不对应

请帮忙

我需要作为数据输出，例如 如果我输入 abcd 然后选中一个与之关联的复选框，我需要的输出是 abcd-value of checkbox clicked 这将重复输入组的数量

Answer 1

我假设“cdrtxt”与“.cdr”在同一个节点中？

在“.cdr”上使用 .parent()

$(document).on('click', '.cdr', function() {
     alert(1);
     $(this).parent().find('.cdrtxt').val("1");
});

Answer 2

这一行代码有几个问题：

$("this").find('.cdrtxt').val("1");

1. 没有$("this") 这样的东西。至少如果您的 HTML 中没有非标准的 <this> 标记。当你想引用接收到事件的节点并将它包装在一个 jQuery 对象中时，你应该使用$(this)
2. 您的 HTML 代码中没有 cdrtxt 类。

您的解决方案是搜索单击复选框的文本输入兄弟。比如：

$(this).siblings('input[type=text]').val('something');

Answer 3

<input type="text" name="phno[]" class="form-control" placeholder="Enter No" />
<input type="checkbox" name="cdr[]" class="checkbox-inline cdr" />

您无法使用此命名方案正确关联文本输入字段值和复选框值。

文本字段总是会导致表单提交数据集中的条目，即使它们是空的 - 复选框不会，它们只会在实际选中时创建一个条目。

如果您有四次上述字段组合，但您只选中了第一个和第三个复选框，那么您将获得 $_POST['phno'] 作为一个包含四个文本值的数组，索引从 0 到 3，而 $_POST['cdr'] 将仅包含 两个 复选框值（您没有在此处明确指定一个，因此这些复选框将提交值 on），索引为 0 和 1。

根据这些索引，现在无法判断，哪些复选框被选中了。如果您改为检查第三个和第四个，您仍然会在索引0 和1 下获得这些值。

这里需要预先指定索引：

<input type="text" name="phno[0]" class="form-control" placeholder="Enter No" />
<input type="checkbox" name="cdr[0]" class="checkbox-inline cdr" />

而0 需要在下一组变成1，以此类推。

那么选中的复选框将获得与文本字段对应的索引。

$_POST['cdr'] 中的索引中仍然存在“漏洞” - 如果您检查了第一个（索引 0）和第四个（索引 3），那么之后会设置 $_POST['cdr'][0] 和 $_POST['cdr'][3]。
但是如果你遍历$_POST['phno']，它包含从0到3的所有索引，那么你可以使用该索引值来检查$_POST['cdr']中的对应索引是否被设置。

因此您将不得不修改您的 JavaScript 部分，即简单地“克隆”那些现有的行，以便它设置正确的字段名称，包括索引。

Answer 4

复选框的问题是，如果未选中，则不会与表单一起发布。如果您选中复选框并发布表单，您将在 $_POST 变量中获得复选框的值，如果未选中，则不会为 $_POST 变量分配任何值。为了知道选中了哪个复选框，为其分配一个不同的值。此代码可能会解决您的问题

<?php

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

if(isset($_POST['checkbox'])){
echo 'Checkbox: ';
print_r($_POST['checkbox']);
}



if(isset($_POST['text'])){
$text=$_POST['text'];
echo 'Textbox: ';
print_r($text);

}
}
  ?>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form method="POST" action="tests.php">
<input type="checkbox" name="checkbox[]" class="check"  value="1">
<br>
<input type="checkbox" name="checkbox[]" class="check"  value="2">
<br>
<input type="checkbox" name="checkbox[]" class="check"  value="3">
<br>
<input type="text" name="text[]" class="text">
<br>

<br>
<input type="submit" name="submit">
</form>
<button id="add">ADD</button>
</body>
<script>
$(document).ready(function()
{
$('#add').on('click',function()
{
var breaks="<br>"
var checkbox="<br>";
var textbox="<br><input type='text' name='text[]' class='text'>";
var check_length=$('.check').length;

console.log(check_length);
for(var i=check_length+1;i<check_length+4;i++)
{   
    checkbox=checkbox+"<input type='checkbox' name='checkbox[]' class='check' value='" + i + "'><br>";
    

}
$('input[type="text"]').last().after(checkbox,textbox);
});
    });
</script>

</html>