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()创建所选复选框值的数组。然后，您可以为data方法的$.ajax()属性提供一个对象，以传递请求中的数据。试试这个：

$('#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);
        }
    });
});

Answer 2

使用复选框作为数组：

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

.serialize()为您提供一系列表单编码数据。

将对象传递给数据：将导致jQuery将表单中的值编码为表单编码数据。

由于您已经对该数据进行了编码，因此您不想对其进行重新编码。

直接传递字符串。

data: $('.checkboxes:checked').serialize(),

Answer 3

使用.each，此演示检查属性checked

$('#submit').click(function() {
    var arrayValue = [];
   // use name or class name
   $('input[name=invid]').each(function(){
     if($(this).prop('checked')){
       arrayValue.push($(this).val())
     }
   });

  console.log(arrayValue);
  // arrayValue use in $.ajax 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="invid" value="100236">
<input type="checkbox" name="invid" value="100852">
<input type="checkbox" name="invid" value="100962">
<input type="checkbox" name="invid" value="100965">
<input type="checkbox" name="invid" value="101002">

<button id="submit">Submit</button>

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

3 个答案: