通过jquery ajax提交复选框

时间:2012-11-08 17:14:08

标签: jquery ajax checkbox

问题已解决

我搜索了几个有关此类问题的信息来源。但是没有确切的解决方案。问题是我无法通过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>

3 个答案:

答案 0 :(得分:3)

您有多个具有相同<input>属性的id元素。这是不允许的,id在文档中必须是唯一的。解决此问题,然后重试。

答案 1 :(得分:3)

修复问题后,Madbreaks建议你可以在jquery中将复选框值变为这样的数组

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

values will be an array that you can pass with ajax like this

var data = 'checkbox="'+values+'"';
$.ajax({
    url: "process.php",
    type: "GET",
    data: data,
    cache: false,
    success: function (html) {
        ... // change html on return
    }
});

希望有所帮助

答案 2 :(得分:0)

var data = $(“#villa_choose”)。serializeArray();

$。AJAX({

url:“process.php”,

输入:“GET”,

数据:数据,

cache:false,

成功:功能(html){

})

});