读取动态添加的复选框值
Posted
技术标签:
【中文标题】读取动态添加的复选框值【英文标题】：reading dynamicaly added check box value 【发布时间】：2020-12-25 16:42:47 【问题描述】：<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 这将重复输入组的数量
【问题讨论】：
【参考方案1】：我假设“cdrtxt”与“.cdr”在同一个节点中？
在“.cdr”上使用 .parent()
$(document).on('click', '.cdr', function()
alert(1);
$(this).parent().find('.cdrtxt').val("1");
);
【讨论】：
实际上我的问题是在提交时我得到了复选框的数组，但我找不到对应于名为“phono”的文本文件 这在读取未定义的 cdrtxt 值时不起作用 那是因为 ".val("1")" 设置了 "1" 的值。 “.val()”将获取值。 api.jquery.com/val【参考方案2】：这一行代码有几个问题：
$("this").find('.cdrtxt').val("1");
-
没有
$("this") 这样的东西。至少如果您的 HTML 中没有非标准的 <this> 标记。当你想引用接收到事件的节点并将它包装在一个 jQuery 对象中时，你应该使用$(this)
您的 HTML 代码中没有 cdrtxt 类。
您的解决方案是搜索单击复选框的文本输入兄弟。比如：
$(this).siblings('input[type=text]').val('something');
【讨论】：
【参考方案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 部分，即简单地“克隆”那些现有的行，以便它设置正确的字段名称，包括索引。
【讨论】：
【参考方案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>
【讨论】：
以上是关于读取动态添加的复选框值的主要内容，如果未能解决你的问题，请参考以下文章
jquery multiselect下拉列表复选框怎么动态添加option并赋值