选中与之对应的复选框时，无法获取值表单输入框 [英] 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屋！