複選框腳本正在計數索引中未選中的框？

Question

此腳本從複選框中提取數據以確定表單發送給PayPal的信息。 PayPal只接受沒有任何缺口的購物車;但是，此腳本計算索引中導致購物車無效的未檢查框（「item_name_1」，「item_name_3」，「item_name_7」）。我該怎麼做才能讓腳本生成一個無間隙的數字序列（「item_name_1」，「item_name_2」，「item_name_3」）？

function updateCart(form) { 
    var cart = ""; 
    var P = $('#P'); 
    for (var i = 0; i < document.getElementById('sList').P.length; i++) { 
     if (document.getElementById('sList').P[i].checked) 
     cart += '<input type="hidden" name="item_name_' + (i+1) + '" value="' + document.getElementById('sList').P[i].value.substring(6) + '"><input type="hidden" name="amount_' + (i+1) + '" value="' + document.getElementById('sList').P[i].value.substring(0, [5]) + '">' 
    } 
    if (cart == "") { 
     alert("Please select products") 
    } else alert(cart); 
    $('#cart_items').html("" + cart); 
    return false; 
} 

Answer 1

您的代碼有幾個問題，除了編號：

功能具有一個從未使用過form參數。

document.getElementById()返回單個DOM元素或null。你的P變量是一個jQuery對象，如果你選擇的是id，它應該只包含一個元素或者不包含任何元素 - 假設你試圖使用P和一個索引，你似乎認爲它可能有多個匹配元素，但只有當你有多個元素具有相同的id，這是無效的html（這會導致不可靠的結果 - 所以如果是這樣，你應該修復它：你可以使用相同的名稱，但不是相同的ID）。

無論哪種方式，嘗試使用P作爲由.getElementById()返回的DOM元素的屬性沒有任何意義。所以到處都是你說的document.getElementById('').P.something是錯的。

就產生了隱藏的輸入獨特的編號，你只需要循環計數一個變量，i，然後輸入計數第二（新）變量，我們稱之爲n。僅在if checked聲明中增加n。或者，如果你使用jQuery循環，你不需要i，只需n。如果你顯示你的HTML，我可以正確地更新它，而不是猜測，但是像這樣：

function updateCart(form) { 
    // first remove any hidden inputs from a previous unsuccessful submit 
    // (this may be optional depending on whether you're submitting with ajax 
    // and/or potentially aborting the submit for other reasons, e.g., if you're 
    // submitting with ajax and the web server might return an error you need to 
    // remove the previous hiddens if the user tries again) 
    $('#cart_items input[type="hidden"]').remove(); 

    // now process each checkbox and add numbered elements for each checked one 
    var n = 0, 
     $f = $("#cart_items"); 

    // you may need to vary the selector here because 
    // I don't know the names of your elements 
    $('input[type="checkbox"]').each(function() { 
     if (this.checked) { 
      // following is a tidied up version of your input creation code, 
      // which assumes that the value attribute of the checkbox holds 
      // the item name and price information. 
      n++; 
      $f.append('<input type="hidden" name="item_name' + n + 
        '" value="' + this.value.substring(6) + '">'); 
      $f.append('<input type="hidden" name="amount_' + n + 
        '" value="' + this.value.substring(0,5) + '">'); 
     } 
    }); 
    if (n === 0) { 
     // no hiddens were added 
     alert("Please select products"); 
     return false; 
    } else { 
     // success, inputs added above 
     return true; // or submit or whatever 
    }  
} 

Answer 2

嘗試使用一個自定義計數器來代替：

function updateCart(form) { 
    var cart = ""; 
    var P = $('#P'); 
    var counter = 0; 

    for (var i = 0; i < document.getElementById('sList').P.length; i++) { 
     if (document.getElementById('sList').P[counter ].checked) { 
      cart += '<input type="hidden" name=" + (counter + 1) + '" value="' + document.getElementById('sList').P[counter].value.substring(6) + '"><input type="hidden" name="amount_' + (counter + 1) + '" value="' + document.getElementById('sList').P[counter].value.substring(0, [5]) + '">'; 
      counter++; 
     } 
    } 

    if (cart == "") { 
     alert("Please select products") 
    } else alert(cart); 

    $('#cart_items').html("" + cart); 

    return false; 
}