Question

<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);
?>

大家好，我已经设法弄清楚如何在文本框中添加复选框输入以列出所选项目。感谢那些帮助我的人（Fred和Joe）。现在我需要添加另一个文本框来累计选择的项目总数，另外一个文本框添加所选项目的总成本。 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)我已经去了，但剧本太乱了，我以为我会发布原始的首字母。要问你想多少？干杯。

Answer 1

我认为这会做你所要求的所有事情（注意我也清理了很多代码，我鼓励你查看更多有关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

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

1 个答案: