將複選框值傳遞給條件上的其他表單元素值

簡單標記，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

將複選框值傳遞給條件上的其他表單元素值

回答

相關問題