简单标记，2个表格的复选框。 Paypal表单提交在底部
我尝试了一些方法失败了。也许如果有人能指出我如何去做我需要的正确方向。
需要：
要检查的任何复选框，请将该值复选框添加到paypal #item_name值字段。如果未选中，请从paypal #item_name字段中删除值文本。
这些是数量和价格。这意味着图表中任何位置的任何复选框。只检查金额 - 不是订单。如果选中1 - 6，则paypal #amount值为4.00美元。如果检查7 - 12，则值为6.00美元。如果检查13 - 18，则值为8.00美元。如果选中19 - 23，则值为$ 10.00
一次只允许检查23个复选框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>samples grid</title>
<style>
table, td, th {border: 1px solid black;}
</style>
</head>
<body>
<table id="samples-a" title="samples grid">
<thead>
<tr>
<th colspan="5">
samples A
</th>
</tr>
</thead>
<tr>
<th colspan="4">
sub header
</th>
<th colspan="1">
sub header
</th>
</tr>
<tr>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
</tr>
<tbody>
<tr>
<td>
<input type="checkbox" value="sample1">
<label>sample1</label>
</td>
<td>
<input type="checkbox" value="sample2">
<label>sample2</label>
</td>
<td>
<input type="checkbox" value="sample3">
<label>sample3</label>
</td>
<td>
<input type="checkbox" value="sample4">
<label>sample4</label>
</td>
<td>
<input type="checkbox" value="sample5">
<label>sample5</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="sample6">
<label>sample6</label>
</td>
<td>
<input type="checkbox" value="sample7">
<label>sample7</label>
</td>
<td>
<input type="checkbox" value="sample8">
<label>sample8</label>
</td>
<td>
<input type="checkbox" value="sample9">
<label>sample9</label>
</td>
<td>
<input type="checkbox" value="sample10">
<label>sample10</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="sample11">
<label>sample11</label>
</td>
<td>
<input type="checkbox" value="sample12">
<label>sample12</label>
</td>
<td>
<input type="checkbox" value="sample13">
<label>sample13</label>
</td>
<td>
<input type="checkbox" value="sample14">
<label>sample14</label>
</td>
<td>
<input type="checkbox" value="sample15">
<label>sample15</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="sample16">
<label>sample16</label>
</td>
<td>
<input type="checkbox" value="sample17">
<label>sample17</label>
</td>
<td>
<input type="checkbox" value="sample18">
<label>sample18</label>
</td>
<td>
<input type="checkbox" value="sample19">
<label>sample19</label>
</td>
<td>
<input type="checkbox" value="sample20">
<label>sample20</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="sample21">
<label>sample21</label>
</td>
<td>
<input type="checkbox" value="sample22">
<label>sample22</label>
</td>
<td>
<input type="checkbox" value="sample23">
<label>sample23</label>
</td>
<td>
<input type="checkbox" value="sample24">
<label>sample24</label>
</td>
<td>
<input type="checkbox" value="sample25">
<label>sample25</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="sample26">
<label>sample26</label>
</td>
<td>
<input type="checkbox" value="sample27">
<label>sample27</label>
</td>
<td>
<input type="checkbox" value="sample28">
<label>sample28</label>
</td>
<td>
<input type="checkbox" value="sample29">
<label>sample29</label>
</td>
<td>
<input type="checkbox" value="sample30">
<label>sample30</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="sample31">
<label>sample31</label>
</td>
<td>
<input type="checkbox" value="sample32">
<label>sample32</label>
</td>
<td>
<input type="checkbox" value="sample33">
<label>sample33</label>
</td>
</tr>
</tbody>
</table>
<table id="samples-b">
<thead>
<tr>
<th colspan="5">
samples B
</th>
</tr>
</thead>
<tr>
<th colspan="5">
sub header
</th>
</tr>
<tr>
<th colspan="4">
sub header
</th>
<th colspan="1">
sub header
</th>
</tr>
<tr>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
</tr>
<tbody>
<tr>
<td>
<input type="checkbox" value="sample34">
<label>sample34</label>
</td>
<td>
<input type="checkbox" value="sample35">
<label>sample35</label>
</td>
<td>
<input type="checkbox" value="sample36">
<label>sample36</label>
</td>
<td>
<input type="checkbox" value="sample37">
<label>sample37</label>
</td>
<td>
<input type="checkbox" value="sample38">
<label>sample38</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="sample39">
<label>sample39</label>
</td>
<td>
<input type="checkbox" value="sample40">
<label>sample40</label>
</td>
</tr>
<tr>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
</tr>
<tr>
<td>
<input type="checkbox" value="sample41">
<label>sample41</label>
</td>
</tr>
<tr>
<th colspan="5">
sub header
</th>
</tr>
<tr>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
</tr>
<tr>
<td>
<input type="checkbox" value="sample42">
<label>sample42</label>
</td>
<td>
<input type="checkbox" value="sample43">
<label>sample43</label>
</td>
<td>
<input type="checkbox" value="sample44">
<label>sample44</label>
</td>
<td>
<input type="checkbox" value="sample45">
<label>sample45</label>
</td>
<td>
<input type="checkbox" value="sample46">
<label>sample46</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="sample47">
<label>sample47</label>
</td>
</tr>
</tbody>
</table>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="elsa@wool-clothing.com">
<input type="hidden" name="lc" value="US">
<input id="item_name" type="hidden" name="item_name" value="">
<input id="amount" type="hidden" name="amount" value="">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="rm" value="1">
<input type="hidden" name="return" value="http://www.wool-clothing.com/thanks.php">
<input type="hidden" name="cancel_return" value="http://www.wool-clothing.com/cancel.php">
<input type="hidden" name="add" value="1">
<input type="hidden" name="shopping_url" value="http://www.wool-clothing.com/clothing/">
<!--
<input type="hidden" name="weight" value="0.37">
<input type="hidden" name="weight_unit" value="lbs">
<input type="hidden" name="handling_cart" value="4.00" />
-->
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_SM.gif:NonHosted">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</body>
</html>
答案 0 :(得分：0)
我对你问题的第一点和第三点的答案是：
var checkboxes = Array.prototype.slice.call(document.getElementsByTagName('input')).filter(function (input) {
var type = input.getAttribute('type'),
// && is needed to make sure that the attribute exists
isCheckbox = type && type == 'checkbox';
return isCheckbox;
}),
itemName = document.getElementById('item_name'),
amount = document.getElementById('amount'),
maxCheckboxesSelectedThreshold = 23,
// by default
checkboxesSelected = 0;
checkboxes.forEach(function (checkbox) {
checkbox.addEventListener('click', function (e) {
// checked variable describes if current checkbox is checked RIGHT AFTER the click is performed, NOT before
var checked = this.checked,
value = this.value,
checkboxNumber;
this.checked = checked && (checkboxesSelected++ < maxCheckboxesSelectedThreshold) || (checkboxesSelected-- && false);
console.log("checked amount: " + checkboxesSelected);
if (this.checked) {
itemName.value = value;
checkboxNumber = parseInt(value.replace('sample', ''));
} else {
itemName.value = '';
}
// based on amount of checked checkboxes, change the price value
if (checkboxesSelected <=6) {
amount.value = '4$';
} else if (checkboxesSelected >=7 && checkboxesSelected <=12) {
amount.value = '6$';
} else if (checkboxesSelected >= 13 && checkboxesSelected <= 18) {
amount.value = '8$';
} else if (checkboxesSelected >= 19 && checkboxesSelected <= 23) {
amount.value = '10$';
}
});
});
你应该知道如何理解以下代码的工作原理：
this.checked = checked && (checkboxesSelected++ < maxCheckboxesSelectedThreshold) || (checkboxesSelected-- && false);
A && B，则true逻辑运算符为true。它首先检查A，如果它是false，那么它不会转到B，因为所有表达式都被评估为false;如果A是true，则运营商会转到B并检查它。A || B，则true运算符为true。 JS首先检查A，如果它true，它没有转到B，它会返回true所有表达式A || B 基于此，您现在知道：
如果checked && (checkboxesSelected++ < maxCheckboxesSelectedThreshold)为真，则表示之前未检查过复选框，已检查的复选框数量小于阈值。因此JS返回true，选中复选框并增加所选复选框的计数器。 JS没有去右手边操作数！ （(checkboxesSelected-- && false)）。
但如果第一部分是假的，那么JS就会转到这一部分：(checkboxesSelected-- && false)。到这个时候，计数器已经增加了，我们需要通过这样做来减少它：checkboxesSelected--。 && false使表达式始终为false，因为如果JS已到达此位置，则不能选中该复选框！因此，所有表达式checked && (checkboxesSelected++ < maxCheckboxesSelectedThreshold) || (checkboxesSelected-- && false);都为false，this.checked变为false。因此，点击后不会选中该复选框。
如果选中1 - 6，则paypal #amount值为$ 4.00。如果检查7 - 12，则值为6.00美元。如果检查13 - 18，则值为 $ 8.00如果检查19 - 23，则值为$ 10.00
您应该澄清您的要求。如果检查2,4和8,10怎么办？ 该字段是否应该被清除，例如？
先前发布的代码已在请求澄清后更新。