选中与之对应的复选框时,无法获取值表单输入框 [英] Not able to fetch value form input box when checkbox against it is checked
问题描述
我很少有来自数据库的动态输入框,此后,当用户单击链接时,可以增加输入框
I have few input boxes that come dynamically from the database and after that, I have input boxes that can be increased when a user clicks on a link
<?php
$sql2 = "SELECT * FROM child where adult_id = '$user_id' ";
$result2 = $conn->query($sql2);
while($row = $result->fetch_assoc()) {
$name = $row["name"];
$age = $row["age"];
$price = $row["price"];
?>
<input type="checkbox">
<input type="text" name="name" placeholder="Name">
<input type="text" name="age" placeholder="Age">
<?php }} ?>
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<div class="form-row align-items-center">
<input type="checkbox" name="child">
<input type="text" name="name" placeholder="Name">
<input type="text" name="age" placeholder="Age">
</div>
</div>
</div>
<span class="add-field"><i class="fas fa-plus"></i> <span>Add another learner</span></span>
</div>
<script>
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
});
<script>
但是我不能做的是,当用户选中一个复选框时,该复选框的名称,年龄和价格就会显示在另一个内部.
However what I am not able to do is that when a user checks a checkbox then name, age, and price against that checkbox gets displayed inside another .
在此处要注意:对于每一行,价格都保持不变,但是名称和年龄会有所不同,最后我需要显示所有价格的总和.
POINT HERE TO NOTE is that for every row the price remains the same but name and age will vary and in the end I need to display the total of all the prices.
我能做的代码是在单击复选框时获取值,但是它只能获取1个值,之后,我被卡住了,无法前进
The code that I was able to do was to fetch the value when the checkbox is clicked, but it fetches only 1 value, after that, I am stuck and not able to move forward
除了复选框代码上方的代码之外,在此处
Apart from the code above the checkbox code is here
如果有人可以帮助我,将不胜感激
Would appreciate if someone could help me
如果可以帮助您更好地了解情况,我还将附加图片
I am also attaching images if that can help in a better understanding of the situation
推荐答案
每当单击复选框时,您都可以使用each
循环查看是否选中了所有复选框,这取决于您可以使用所需数据创建html.
Whenever your checkbox is clicked you can use each
loop to see which all checkboxes are checked or unchecked depending on that you can create your html with required datas .
演示代码:
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
});
var data = ""
//when checkbox is clicked
$(document).on("click", "input[type=checkbox]", function() {
var total = 0;
//empty previous data
$("#result").html("");
var lengths=$('input[type=checkbox]:checked').length;
console.log(lengths)
//if length is > 0 then only looped
if(lengths > 0 ){
var data = "<table border='1'><tr><th>Name</th><th>Age</th><th>Price</th></tr>";
//looping through all checkbox
$("input[type=checkbox]").each(function() {
//checking if checkbox is checked
if ($(this).is(":checked")) {
//get name and age
var name = $(this).closest(".form-row").find("input[name=name]").val();
var age = $(this).closest(".form-row").find("input[name=age]").val();
//add the same
data += "<tr><td>" + name + " </td><td> " + age + "</td><td>180$</td> </tr>";
total = total + 180;
}
});
//add total as well
data += "<tr><td colspan ='3'> TOTAL :" + total + "$</td><tr></table>";
//append data
$("#result").append(data)
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<div class="form-row align-items-center">
<input type="checkbox" name="child">
<input type="text" name="name" placeholder="Name">
<input type="text" name="age" placeholder="Age">
</div>
</div>
</div>
<span class="add-field"><i class="fas fa-plus"></i> <span>Add another learner</span></span>
</div>
<div id="result"></div>
这篇关于选中与之对应的复选框时,无法获取值表单输入框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!