复选框脚本对索引中未选中的框进行计数

Checked box script is counting unchecked boxes in the index?

本文关键字：脚本 索引 复选框      更新时间：2023-09-26

这个脚本从复选框中提取数据，以确定表单发送给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;
}

除了编号之外，您的代码还有一些问题:

函数有一个从未使用过的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
    }    
}

尝试使用自定义计数器:

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;
}
相关文章：