如何获取复选框的值并使用jquery将其分配给文本框的值？

Question

I am trying to make a restaurant order table(form) with the columns (checkbox, article, quantity, price). I would like to get the value of the checkbox and assign it to the value of the textbox, knowing that the table is populated from the Mysql database using a PHP code. I want to make the price of each item visible in the corresponding textbox, everytime I click on its corresponding checkbox.

// my attempt at a jqyery function

$(document).ready(function(){
  $('input:checkbox').click(function(){
    $('input:checkbox:checked').each(function(){
     var price = parseInt(($(this).val()));
    });
    $('#<?php echo $row['idchoix'] ?>').val(price);
  });
});

// the php code for the table

<?php

// Check connection

$result = mysqli_query($con,"SELECT * from menu order by type");

echo "<form action='order.php' method='POST' >";
echo "<legend id='legend'>Nouvelle commande</legend>";
echo "<table class='table table-bordered table-striped table-hover' >
<tr>
<th>Categorie</th>
<th></th>
<th>Article</th>
<th>Prix unitaire</th>
<th>Quantité</th>
<th>Somme</th>
</tr>";



while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['type'] . "</td>";

echo "<td> <input type='checkbox' class='form-check-input' id='check1' value='".$row['prixunitaire']."'> </td>";
echo "<td>" . $row['choix'] . "</td>";

echo "<td>" . $row['prixunitaire'], "Dh" . "</td>";

echo "<td> <div class='btn-toolbar' role='toolbar' aria-label='Toolbar with button groups'>
  <div class='btn-group mr-2' role='group' aria-label='First group' required='required'>
    <button type='button' class='btn btn-secondary' >x1</button>
    <button type='button' class='btn btn-secondary'>x2</button>
    <button type='button' class='btn btn-secondary'>x3</button>
    <input type='number' class='btn btn-secondary form-control' style='width:70px;' name='quantity' value='4' ></div></div></td>";


echo "<td> . <input type='number' class='btn btn-secondary form-control' style='width:200px;' id='".$row['idchoix']."' name='quantity' value=00.00 readonly> </td>";


echo "</tr>";
}

echo "</table>";

echo "<input class='btn btn-success form-control' type='submit' value='Envoyer la commande'>";

echo "</form>";
?>

Answer 1

You can try like this I think it is a scope issue for price variable

$(document).ready(function(){
  $('input:checkbox').click(function(){
    var price;
    $('input:checkbox:checked').each(function(){
     price = parseInt(($(this).val()));
    });
    $('#<?php echo $row['idchoix'] ?>').val(price);
  });
});