将复选框值传递给条件上的其他表单元素值

简单标记，2个表格填充复选框。贝宝表格提交在底部将复选框值传递给条件上的其他表单元素值

我试过几种方法失败。也许如果有人能够指出我即使在正确的方向去做我所需要的事情。

需求：

是被选中的所有复选框，添加复选框值文本到贝宝#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> 
 
    \t <th colspan="5"> 
 
    \t  samples A 
 
    \t </th> 
 
    \t </tr> 
 
     </thead> 
 
     <tr> 
 
    \t <th colspan="4"> 
 
    \t sub header 
 
    \t </th> 
 
    \t <th colspan="1"> 
 
    \t sub header 
 
    \t </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> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample1"> 
 
    \t \t <label>sample1</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample2"> 
 
    \t \t <label>sample2</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample3"> 
 
    \t \t <label>sample3</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample4"> 
 
    \t \t <label>sample4</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample5"> 
 
    \t \t <label>sample5</label> 
 
    \t </td> 
 
    \t </tr> 
 
    \t <tr> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample6"> 
 
    \t \t <label>sample6</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample7"> 
 
    \t \t <label>sample7</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample8"> 
 
    \t \t <label>sample8</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample9"> 
 
    \t \t <label>sample9</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample10"> 
 
    \t \t <label>sample10</label> 
 
    \t </td> 
 
    \t </tr> 
 
    \t <tr> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample11"> 
 
    \t \t <label>sample11</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample12"> 
 
    \t \t <label>sample12</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample13"> 
 
    \t \t <label>sample13</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample14"> 
 
    \t \t <label>sample14</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample15"> 
 
    \t \t <label>sample15</label> 
 
    \t </td> 
 
    \t </tr> 
 
    \t <tr> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample16"> 
 
    \t \t <label>sample16</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample17"> 
 
    \t \t <label>sample17</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample18"> 
 
    \t \t <label>sample18</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample19"> 
 
    \t \t <label>sample19</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample20"> 
 
    \t \t <label>sample20</label> 
 
    \t </td> 
 
    \t </tr> 
 
    \t <tr> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample21"> 
 
    \t \t <label>sample21</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample22"> 
 
    \t \t <label>sample22</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample23"> 
 
    \t \t <label>sample23</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample24"> 
 
    \t \t <label>sample24</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample25"> 
 
    \t \t <label>sample25</label> 
 
    \t </td> 
 
    \t </tr> 
 
    \t <tr> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample26"> 
 
    \t \t <label>sample26</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample27"> 
 
    \t \t <label>sample27</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample28"> 
 
    \t \t <label>sample28</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample29"> 
 
    \t \t <label>sample29</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample30"> 
 
    \t \t <label>sample30</label> 
 
    \t </td> 
 
    \t </tr> 
 
    \t <tr> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample31"> 
 
    \t \t <label>sample31</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample32"> 
 
    \t \t <label>sample32</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample33"> 
 
    \t \t <label>sample33</label> 
 
    \t </td> 
 
    \t </tr> 
 
     </tbody> 
 
    
 
    </table> 
 
    
 
    <table id="samples-b"> 
 
     <thead> 
 
     <tr> 
 
    \t <th colspan="5"> 
 
    \t  samples B 
 
    \t </th> 
 
    \t </tr> 
 
     </thead> 
 
     <tr> 
 
    \t <th colspan="5"> 
 
    \t sub header 
 
    \t </th> 
 
     </tr> 
 
     <tr> 
 
     <th colspan="4"> 
 
    \t sub header 
 
    \t </th> 
 
    \t <th colspan="1"> 
 
    \t sub header 
 
    \t </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> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample34"> 
 
    \t \t <label>sample34</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample35"> 
 
    \t \t <label>sample35</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample36"> 
 
    \t \t <label>sample36</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample37"> 
 
    \t \t <label>sample37</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample38"> 
 
    \t \t <label>sample38</label> 
 
    \t </td> 
 
    \t </tr> 
 
    \t <tr> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample39"> 
 
    \t \t <label>sample39</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample40"> 
 
    \t \t <label>sample40</label> 
 
    \t </td> 
 
    \t </tr> 
 
     <tr> 
 
      <th>sub header</th> 
 
      <th>sub header</th> 
 
      <th>sub header</th> 
 
      <th>sub header</th> 
 
      <th>sub header</th> 
 
     </tr> 
 
    \t <tr> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample41"> 
 
    \t \t <label>sample41</label> 
 
    \t </td> 
 
    \t </tr> 
 
    \t <tr> 
 
    \t <th colspan="5"> 
 
    \t  sub header 
 
    \t </th> 
 
    \t </tr> 
 
    \t <tr> 
 
      <th>sub header</th> 
 
      <th>sub header</th> 
 
      <th>sub header</th> 
 
      <th>sub header</th> 
 
      <th>sub header</th> 
 
     </tr> 
 
    \t <tr> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample42"> 
 
    \t \t <label>sample42</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample43"> 
 
    \t \t <label>sample43</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample44"> 
 
    \t \t <label>sample44</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample45"> 
 
    \t \t <label>sample45</label> 
 
    \t </td> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample46"> 
 
    \t \t <label>sample46</label> 
 
    \t </td> 
 
     </tr> 
 
    \t <tr> 
 
    \t <td> 
 
    \t  <input type="checkbox" value="sample47"> 
 
    \t \t <label>sample47</label> 
 
    \t </td> 
 
    \t </tr> 
 
     </tbody> 
 
    </table> \t 
 
     
 
    <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="[email protected]"> 
 
      <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/"> 
 
      <!-- 
 
    \t <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" /> 
 
    \t --> 
 
      <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>

来源

2017-04-03 chatterb0x

我已经为第一个和你的问题的第三个答案：

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 checkes第一，如果它是true，它不会去B，它在此基础上的所有表达A || B

返回true，你现在知道的是：

如果checked && (checkboxesSelected++ < maxCheckboxesSelectedThreshold)是真实的，这意味着复选框先前未被选中，已经选中的复选框数量小于阈值。所以JS返回true，检查复选框并增加所选复选框的计数器。 JS不会去右侧的操作数！（(checkboxesSelected-- && false)）。

但是，如果第一部分是假的，那么JS会转到这个部分：(checkboxesSelected-- && false)。这时计数器已经增加了，我们需要通过这样做来减少计数器：checkboxesSelected--。 && false使得表达式总是为false，因为如果JS已经到达这个地方，那么复选框一定不能被检查！因此所有表达式checked && (checkboxesSelected++ < maxCheckboxesSelectedThreshold) || (checkboxesSelected-- && false);都是错误的，并且this.checked变成了false。所以点击后复选框不会被选中。

如果1 - 6检查贝宝#amount值为$ 4,00。如果7-12被检查，价值是6.00美元。如果检查13-18，则值为 $ 8.00。如果检查19 - 23价值是$ 10.00

您应该澄清您的请求。如果检查2,4和8,10，该怎么办？应该清除该字段，例如？

之前发布的代码在请求说明后已更新。

来源

2017-04-03 22:02:11 Dzmtrs

哇。目前这很重要。非常感谢你，我很快就会对此进行测试。为了澄清第三部分，我指任何顺序的任何复选框（图表1-6中的任何地方，图表上的任何地方的7-12等）。它们的数量都将是相同的价格。 – chatterb0x

那么你的意思只是检查复选框的数量？ – Dzmtrs

是的，只是数量很重要。对不起有时候我有一个正确的措词问题。我已经更新了原来的问题以增加这个清晰度。 – chatterb0x

将复选框值传递给条件上的其他表单元素值

回答

相关问题