0 
<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)我试过了，但剧本太乱了，我以为我会发布原始的起始剧本。你觉得有太多要问的吗？干杯。

4

1 回答 1

0

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

  • 每次单击复选框时，它都会运行函数calculateCheckout()，这会找到所有选中的复选框，并计算选中的总数和总价。
  • 我将价格存储在一个名为data-price. 在我的 JSFiddle 中，它只取增量值并将其乘以 2，但在一个工作示例中，它应该是任何数字。
  • 该解决方案现在将检查整个主体是否有任何与 class 的输入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
于 2013-06-26T12:08:13.870 回答