通过jQuery AJAX提交传递复选框

Question

问题已解决

我查阅了多个信息源以解决此类问题，但仍未找到确切的解决方案。问题在于我无法通过ajax将复选框的值传递到div id，并且它在父窗口中始终保持打开状态。以下是我的代码。

Javascript：

<script type="text/javascript">
$(document).ready(function() {  
    $("#villa_submit").click(function() {   
        var action = $("#villa_choose").attr('action');
//var form_data = { 'vid[]' : []};$("input:checked").each(function() {data['vid[]'].push($(this).val());});
var form_data = $('#villa_choose').serialize();  //suggested by Kev Price 
        $.ajax({
            type: "POST",
            url: action,
            data: form_data,
            beforeSend:function(){
                $('#villa_result').html('<center><img src="/images/loading.gif" alt="Loading..." align="absmiddle"/> loading...</center>');
              },
            success: function(data){
                  $('#test_result').html(data);
            }
        });     
        return false;
    }); 
});
</script>

HTML（超文本标记语言）：

<form name="villa_choose" id="villa_choose" method="post" action="">
<input type="checkbox" name="vid[]" id="vid1" value="1" />
<input type="checkbox" name="vid[]" id="vid2" value="2" />
<input type="checkbox" name="vid[]" id="vid3" value="3" />
<input type="checkbox" name="vid[]" id="vid4" value="4" />
<input type="checkbox" name="vid[]" id="vid5" value="5" />
</form>

<div id="test_result"></div>

- Wilf

---

你尝试过将表单数据作为序列化数组发送吗？即使用以下代码：var form_data = $('#villa_choose').serialize(); - Kev Price

@KevPrice，你的建议很有效！谢谢。 - Wilf

很高兴听到这个 - 我可能应该将其添加为解决方案，而不是评论。可能值得编辑您的原始问题以显示解决方案，以便它显而易见。 - Kev Price

Answer 1

您有多个具有相同id属性的<input>元素。这是不允许的，在文档中id必须是唯一的。请修复此问题并重试。

- Madbreaks

---

请给出您下投票的原因，谢谢。 - Madbreaks

Answer 2

一旦您解决了Madbreaks建议的问题，您就可以像在jquery中这样将复选框值放入数组中：

var values = $("input[type='checkbox']:checked").map(function () {
    return this.value;
}).get();

values将是一个数组，您可以像这样通过ajax传递它

var data = 'checkbox="'+values+'"';
$.ajax({
    url: "process.php",
    type: "GET",
    data: data,
    cache: false,
    success: function (html) {
        ... // 更改返回的html
    }

});

希望能有所帮助。

- Eric Robinson

---

谢谢你的尝试。我找到了解决方案。 :) - Wilf

Answer 3

var data = $("#villa_choose").serializeArray();

变量数据 = $（“#villa_choose”）.serializeArray（）;

$.ajax({

url："process.php"，

type："GET"，

data：data，

cache：false，

success：function（html）{

})

});

- duchuy