读取动态添加的复选框值

如何解决读取动态添加的复选框值

<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值 这将重复输入组的数量

解决方法

我假设“ cdrtxt”与“ .cdr”位于同一节点吗？

在.cdr上使用.parent（）

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

这一行代码有几个问题：

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

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

您所遇到的解决方案是搜索单击复选框的文本输入同级。像这样：

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

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

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

文本字段总是会在表单提交数据集中产生一个条目，即使它们为空-复选框也不会，只有在实际选中的地方才创建一个。

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

基于这些索引，现在无法知道选中哪个复选框的哪个。如果您选择了第三和第四，则仍然在索引on和0下获得这些值。

您需要在此处预先指定索引：

，并且下一组<input type="text" name="phno[0]" class="form-control" placeholder="Enter No" /> <input type="checkbox" name="cdr[0]" class="checkbox-inline cdr" />必须成为0，依此类推。

然后选中的复选框将获得与文本字段相对应的索引。

1的索引中仍然存在“空洞”-如果选中第一个（索引0）和第四个（索引3），则$_POST['cdr']和$_POST['cdr'][0]会之后再设置。
但是，如果循环遍历包含从0到3的所有索引的$_POST['cdr'][3]，则可以使用该索引值来检查$_POST['phno']中的相应索引是否已设置。

因此，您将必须修改JavaScript部分，即简单地“克隆”现有行，以便它设置适当的字段名称，包括索引。

复选框的问题在于，如果未选中该复选框，则不会与表单一起发布。如果选中复选框并发布表单，则将在$ _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>

读取动态添加的复选框值

如何解决读取动态添加的复选框值

解决方法

相关推荐