javascript - 使用 ajax 到 jsp 将复选框值传递到数组中

Question

我有一个如下所示的表单，我需要传递选中的复选框的值，但我不知道如何进行。

<input type="checkbox" id="invid" name="invid" value="100236">
<input type="checkbox" id="invid" name="invid" value="100852">
<input type="checkbox" id="invid" name="invid" value="100962">
<input type="checkbox" id="invid" name="invid" value="100965">
<input type="checkbox" id="invid" name="invid" value="101002">

<button id="submit">Submit</button>

<script>

$('#submit').click(function() {

$.ajax({
    url: "collect.jsp",
    type: "post",
    data: Winvid: invid,
    success: function(data) {
    $('#response').html(data);
    }
});


});
</script>

Answer 1

首先，您的 HTML 无效，因为您重复了 id 属性，而它们必须是唯一的。使用类来代替:

<input type="checkbox" class="invid" name="invid" value="100236">
<input type="checkbox" class="invid" name="invid" value="100852">
<input type="checkbox" class="invid" name="invid" value="100962">
<input type="checkbox" class="invid" name="invid" value="100965">
<input type="checkbox" class="invid" name="invid" value="101002">

然后您可以使用 map() 创建所选复选框值的数组。然后，您可以向 $.ajax() 方法的 data 属性提供一个对象，以传递请求中的数据。试试这个:

$('#submit').click(function() {
    var checkedValues = $('.invid:checked').map(function() {
        return this.value;
    }).get();

    $.ajax({
        url: "collect.jsp",
        type: "post",
        data: { invid: checkedValues },
        success: function(data) {
            $('#response').html(data);
        }
    });
});