jQuery在页面加载的同时运行

时间:2015-01-09 18:28:19

标签: php jquery checkbox

我需要你的帮助。我有一个jquery代码,在我第一次加载页面后工作正常,第二步检查复选框。在后台函数中,updateSg(opts)调用submit.php,这会生成一个Json。

但是我想在打开页面时解决,复选框输入标记从URL获取检查值,并选中复选框但不运行jquery代码。我必须取消选中并再次检查代码是否正在运行。

你能不能给我一个帮助,说明代码是在页面加载的情况下执行的。

谢谢, 姿态

<div id="result"></div>
<div id="filter">
  <h2>Filter</h2>
  <div>
    <input type="checkbox" id="sg" name="sg" checked>
    <label for="sg">Something</label>
  </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script>
  var getsg = "something";

  function makeTable(data){
       var tbl_body = "";
       $.each(data, function(k,v) {
         tbl_body += getsg;
       })
       return tbl_body;
  }

  function getSgFilterOptions(){
    var opts = [];
    $checkboxes.each(function(){
      if(this.checked){
        opts.push(this.name);
      }
    });
    return opts;
  }

  function updateSg(opts){
    $.ajax({
      type: "POST",
      url: "submit.php",
      dataType : 'json',
      cache: false,
      data: {filterOpts: opts},
      success: function(records){
        $('div#result').html(makeTable(records));
      }
    });
  }

  var $checkboxes = $("input:checkbox");
  $checkboxes.on("change", function(){
    var opts = getSgFilterOptions();
    updateSg(opts);
  });

  updateSg();

  </script> 

1 个答案:

答案 0 :(得分:1)

您应该检查是否在第一个位置选中了复选框。

接下来,当您的网页加载时,您的updateSg()函数不会为ajax提供postData(因此 filterOpts 为空)。

试试这个:

<script>
  var getsg = "something";
  var $checkboxes = $("input:checkbox");

  function makeTable(data){
      var tbl_body = "";
      $.each(data, function(k,v) {
          tbl_body += getsg;
      });
      return tbl_body;
  }  

  function callAjax(opts){
      $.ajax({
          type: "POST",
          url: "submit.php",
          dataType : 'json',
          cache: false,
          data: {filterOpts: opts},
          success: function(records){
              $('div#result').html(makeTable(records));
          }
      });
  }

  $checkboxes.on("change", function(){
      getSgFilterOptions();
  });

  function getSgFilterOptions(){
      if($checkboxes.length){
          var opts = [];
          $checkboxes.each(function(){
              if(this.checked){
                  opts.push(this.name);
              }
          });
          callAjax(opts);
      }
  }

  getSgFilterOptions();

</script>