如何使用jquery将复选框值传递到.load页面

时间:2013-05-14 16:10:09

标签: jquery ajax checkbox

我有一个带有一些复选框的表单,我想在其中发布到一个页面(data.php),但是我想使用带有jquery的.load函数在我的页面中加载页面,以便我可以检查一个复选框和然后更新我的查询,而不必重新加载页面。任何人都可以帮助jquery代码,因为我是jquery的新手,无法解决我需要的代码。任何帮助将非常感激。提前致谢。

更新:

我有以下jquery工作,但我有2个问题,第一个是页面加载data.php有一个分页,当点击链接时,它返回没有结果,因为页面正在重新加载并返回到默认值我有2组复选框,每个复选框都有一个提交按钮,两个都具有相同的ID名称ect和顶部按钮提交表单加载页面中的数据但由于某种原因底部提交按钮加载实际的data.php页面,我不明白为什么。如果有人可以帮助或指出正确的方向,我会非常感激。感谢

这是我的java脚本

  <script type="text/javascript">
$(document).ready(function() {  
$("#submit").click(function() {   
   var action = $("#criteria").attr('action');
   var form_data = $('#criteria').serialize(); 
        $.ajax({
        type: "POST",
        url: action,
        data: form_data,
        beforeSend:function(){
  $('#loader').html('<center><img src="/images/loading-big.gif" alt="Loading..." align="absmiddle"/> loading...</center>').fadeIn('fast');;
          },
   success: function(data){
        $('#exercise_list').html(data).fadeIn('slow');
        $("#loader").fadeOut('slow');
        }

    });     
    return false;
}); 
 return false;
});

 </script>

1 个答案:

答案 0 :(得分:0)

这很有效。当你更了解JQuery时,你会发现你可以找到其他方法

<div id="target" style="height:100px; width:100px; overflow: hidden"></div>
<input type="checkbox" id="chk1"/>
<input type="checkbox" id="chk2"/>


<script type="text/javascript">
$(document).ready(function() {
    $('input[type=checkbox]').click(function () {
        if($(this)[0].checked) {
            if($(this).attr("id") === "chk1") {
                $("#target").load("http://www.google.fr"); 
            } else {
                $("#target").load("www.google.en"); 
            }
        }
    });
});

你可以使用:

$('input[type=checkbox]').on('click', function () { 

click方法是此

的快捷方式