チェックボックスのスクリプトは、インデックスの未チェックのボックスを数えていますか？

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変数は、idによって選択されている場合は、1つの要素を保持するか、または保持しないjQueryオブジェクトです。Pインデックスを使用しようとすると、複数の要素が一致する可能性があると思われるが、同じIDの複数の要素が無効なhtmlです（信頼性の低い結果が得られますので修正する必要があります：同じ名前の要素は同じidではありません）。

いずれにしても、.getElementById()が返すDOM要素のプロパティとしてPを使用しようとしても意味がありません。だからどこでもdocument.getElementById('').P.somethingが間違っていると言った。

隠れた入力のために一意の番号を生成する限り、ループカウンタの変数はiである必要があります。次に入力カウント用の2番目の（新しい）変数をnとしましょう。 ステートメント内でのみ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; 
}