通过jQueryAjax提交传递复选框

问题已解决

我已经搜索了好几个信息源来查找这类问题。但没有确切的解决办法。问题是我无法使用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>

<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>

$（文档）.ready（函数（）{
$（“#villa_submit”）。单击（函数（）{
var action=$（“#villa_choose”）.attr（'action'）；
//var form_data={'vid[]'：[]}；$（“输入：已选中”）.each（函数（）{data['vid[]']]].push（$（this.val（））；}）；
var form_data=$（“#villa_choose”）.serialize（）；//由Kev Price建议
$.ajax({
类型：“POST”，
url:action，
数据：表格数据，
beforeSend:function（）{
$（'villa_result'）.html（'loading…'）；
},
成功：功能（数据）{
$（'test#u result'）.html（数据）；
}
});     
返回false；
}); 
});

HTML:

<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>

<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>

---

您有多个

元素具有相同的

id

属性。这是不允许的，

id

在文档中必须是唯一的。修复该问题并重试。

一旦修复了问题，您可以将复选框值放入jquery中的类似数组中

希望对您有所帮助。

var data=$（“#维拉_choose”）.serializeArray（）

$.ajax({

url:“process.php”

键入：“获取”

数据：数据

cache:false

成功：函数（html）{

})

---

}))

您是否尝试过以序列化数组的形式发送表单数据？i、 e.var form_data=$（“#villa_choose”）.serialize（）@KevPrice，你的建议很有效！谢谢。很高兴听到这个消息-我可能应该把它作为一个解决方案而不是一个评论。可能值得编辑您的原始问题，以显示解决方案，以便它明显感谢您的尝试。我找到了解决办法。：）请说明您这样做的原因。