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

Question

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

更新：

我有以下可以工作的 jquery，但我有 2 个问题第一个是页面即时加载 data.php 有分页，当点击链接时它不返回任何结果，因为页面正在重新加载并返回默认值我有 2 组复选框，每个复选框都有一个具有相同 ID 名称等的提交按钮，顶部按钮提交表单加载页面中的数据，但由于某种原因，底部提交按钮加载实际的 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>

Answer 1

这行得通。当您对 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 () { 

点击方法是一个快捷方式