javascript - Metasearch - 按下复选框时有关 Jquery ajax 请求的帮助

Question

当复选框按下真或假时，我想发出 Jquery ajax 请求。

我的表格：

<form method="get" action="/" accept-charset="UTF-8"><div style="margin: 0pt; padding: 0pt; display: inline;"><input name="utf8" value="✓" type="hidden"></div>        
    <div class="menuitem">
    <label for="search_company1">company1</label>
    <input name="search[company1_is_true]" value="0" type="hidden"><input id="search_company1_is_true" name="search[company1_is_true]" value="1" type="checkbox">
    </div>
    <div class="menuitem">
    <label for="search_company2">company2</label>
    <input name="search[company2_is_true]" value="0" type="hidden"><input id="search_company2_is_true" name="search[company2_is_true]" value="1" type="checkbox">
    </div>
    <div class="menuitem">
    <label for="search_company3">company3</label>
    <input name="search[company3_is_true]" value="0" type="hidden"><input id="search_company3_is_true" name="search[company3_is_true]" value="1" type="checkbox">
    </div>
<input id="search_submit" name="commit" value="Create Search" type="submit">
</form>

Answer 1

在 menuitem 类中的任何复选框更改为 true 或 false 后，这将启动自定义 doAjaxRequest 函数。

$('.menuitem input:checkbox').change(function(){
  doAjaxRequest();
})

回答第一个评论问题：

$('.menuitem input:checkbox').change(function(){
      $('form').submit();
})

尽管您可能想为表单定义一些 id 并使用它而不是表单选择器：$('#formId')

编辑 我刚刚对你的代码和我的第二个答案做了jsfiddle，它似乎有效：http: //jsfiddle.net/dUPmg/

Answer 2

应该是一个相当微不足道的任务：

$('form input:checkbox').change(function() { 
    // $.ajax({});
    $('form').submit();
});

这会将更改事件处理程序绑定到每个复选框元素。当这些元素的数量增加时，您应该改为使用委托的更改事件。

$('form').delegate('input:checkbox', 'change', function( e ) {
    switch( e.id ) { 
        case 'search_company1_is_true':
             $.ajax({});
             break;
        case 'search_company2_is_true':
             $.ajax({});
             break;
        // and so forth
    }
});

Answer 3

$('form input:checkbox').bind('click change', function(){
    $.ajax({
      url: "/test.html",
      success: function(){
          $(this).addClass("done");
      }
    });
});