复选框将输入添加到文本框总选择和总选择成本

Check box add input to text box total selection and total cost of selection

本文关键字：选择 文本 输入 添加 复选框      更新时间：2023-09-26
<script>
var itemsAdded = Array();
function moveNumbers(text) { 
var i = itemsAdded.indexOf(text)
if ( i >= 0) { 
   itemsAdded.splice(i,1); 
 } else {
   itemsAdded.push(text);
 }
 document.getElementById("result").value=itemsAdded.join(" "); 
 } 
 $(function() {
 for (i=0;i<10;i++) {
 console.log(i);
 $("body").append("<input type='checkbox' name='add' value='" + i + "'   onclick='moveNumbers(this.value)'/>          Checkbox" + i + "<br/>");
 }
 });

 </script>
 <textarea id="result" cols="12" rows="6" readonly>
 </textarea>
 <tr>
 <?php
 $path = "photos/";
 $dir_handle = @opendir($path) or die("Unable to open folder");
 echo "<table height='500px'width='800px'align='center'border='1'>";
 echo "<tr>";
 while (false !== ($file = readdir($dir_handle))) {
 if($file == "index.php")
 continue;
 if($file == ".")
 continue;
 if($file == "..")
 continue;
 {
echo ($x % 6 == 0) ? "</tr><tr>" : "";
echo "<td><input type='checkbox' name='add' value='$file' onclick='moveNumbers(this.value)'>
<img src='photos/$file'alt='$file' style='height:auto;width:85%;'alt='$file'>
<br>
$file
</td>";
$x++;
}
}
echo "</tr>";
echo "</table>";
closedir($dir_handle);
?>

大家好，我已经设法弄清楚如何将复选框输入添加到文本框以列出选定的项目。感谢那些在这里帮助我的人(弗雷德和乔(。现在，我需要添加另一个文本框来添加所选项目的总数量，并添加另一个文本框以添加所选所有项目的总成本。 E.G. Check box checked -> Add to list text box (this bit already works) -> Add total items listed to text box -> Add total cost of all items selected (each image costs say $10 each) 我试过了，但脚本太乱了，我想我只会发布原来的开始。要问你觉得吗？干杯。

我认为这可以满足您要求的所有功能(请注意，我也清理了很多代码，我鼓励您查看有关jQuery的更多信息，因为您似乎正在使用JavaScript做一些事情，您也可以使用jQuery。

  • 每次单击复选框时，它都会运行函数calculateCheckout()，这将查找所有选中的复选框，并计算所选总数和总价格。
  • 我将价格存储在名为 data-price 的属性中。在我的 JSFiddle 中，它只是取增量值并将其乘以 2，但在工作示例中，它应该是任何数字。
  • 该解决方案现在将检查整个主体中是否有任何带有类product-check的输入。只要您的复选框可以具有此类，那么此解决方案就可以工作。我添加了一个示例产品，让您了解如何正确使用复选框。

JSFiddle

.JS 

var itemsAdded = [];
function calculateCheckout() { 
  var checked_boxes = $("input.product-check:checked"); // Find all checked checkboxes
  var items_total = 0;
  $("#x-names").val(""); // Reset the list of names
  checked_boxes.each(function() { // Loop through all of our checkboxes
    // Add the name (taken from the checkbox data-name attribute) to the list of names
    $("#x-names").val($("#x-names").val() + " " + $(this).attr("data-name")); 
    items_total += parseFloat($(this).val()); // Iterate our total price by taking the checkbox value
  });    
  // Record the total checkbox length
  $("#x-length").val(checked_boxes.length); 
  $("#x-total").val(items_total);
}
$(document).ready(function() {
  // Set an event to call calculateCheckout every time an element with class .check-move is clicked. 
  // See the jQuery 'on' function for more info
  $("body").on("click", "input.product-check", calculateCheckout);
  for (i=1;i<5;i++) {
    $("#checkboxes").append("<input type='checkbox' class='product-check' value='"+(i * 2 )+"' data-name='"+i+"' /> Checkbox" + i + "<br />");
  }
});

.HTML

<div id="checkboxes"></div>
<h1>Selected Products</h1>
<textarea id="x-names"></textarea>
<h1>Total Selected</h1>
<input id="x-length" />
<h1>Total Price</h1>
<input id="x-total" />
<input type="checkbox" value="745" data-name="samgs4" class="product-check" /> Galaxy S4
相关文章：