如何构造代码以处理JavaScript中多个表单元素中的多个变量并记住选择

例如，我有一个HTML表单：

<form role="search" method="get" id="searchform" action="" >
    <!-- DIRECT SEARCH INPUT TO SEARCH STRING -->
    <input type="text" value="" name="s" id="s" /> 
    <input type="submit" id="searchsubmit" value="Search" />
    <!-- DROPDOWN TO SELECT ONE CHOICE -->
    <select name='country' id='country' class='postform' >
        <option class="level-0" value="2">USA</option>
        <option class="level-0" value="3">Canada</option>
        <option class="level-0" value="4">Mexico</option>
        <option class="level-0" value="5">Cuba</option>
    </select>
    <!-- CHECKBOXES TO SELECT MULTIPLE CHOICES -->
    <div id="color">
        <input type="checkbox" name="" value="21" />Beachfront
        <input type="checkbox" name="" value="16" />TV
        <input type="checkbox" name="" value="20" />Internet
        <input type="checkbox" name="" value="17" />Pets Allowed
    </div> 
</form>
<div id="results"><!-- THE AJAX RESULTS GOES HERE --></div>

我希望每次用户都能发出AJAX请求：

1）在搜索输入框中写入内容，然后单击搜索按钮

或

2）从下拉菜单中选择一个选项

或

3）从选中的复选框中选择一个或多个选项

问题是，我不知道如何正确地构建我的JavaScript代码，也不知道什么是记住和管理用户之前选择的选项的最佳方式，以考虑所有因素。例如，不仅是当他写东西并点击搜索按钮时的搜索词，还可以计算下拉选项（可能是之前做的），如果他以前检查过某个东西，还可以从复选框中选择选中的选项。以下是我目前所拥有的：

jQuery(document).ready(function($){
    // RESULTS SHOULD APPEAR IN #results DIV AFTER AJAX IS DONE
    var $maincontent = $('#results'); 

    // SEARCH INPUT PROCESSING
    $('#searchsubmit').click(function(e){ 
        e.preventDefault();
        var searchval = $('#s').val();
        $.post(
            WPaAjax.ajaxurl,
            {
                action : 'ajax_search_action_do',
                searchval : searchval
            },
            function( response ) {
                $maincontent.empty();
                $maincontent.append( response );
            }
        );
    });
    // COUNTRY DROPDOWN CHOICE PROCESSING
    $('#country').on('change', function() { 
            var countryval = this.value;
            $maincontent.animate({ opacity : '0.1' })
            $.post(
                WPaAjax.ajaxurl,
                {
                    action : 'ajax_search_action_do',
                    countryval : countryval
                },
                function( response ) {
                    $maincontent.empty();
                    $maincontent.append( response );
                    $maincontent.animate({ opacity : '1' })
                }
            );
            return false;
    });

    // CHECKBOXES PROCESSING
    $('#color input[type=checkbox]').click(function() {    
        if (this.checked) {
            // code if checked
        }
        else {
            // nothing
        }        
    });
});

正如你所看到的，情况非常糟糕。因为一个"函数"只检查点击，一次更改，我不知道如何从复选框中获取值，创建一个数组并通过ajax发送；（.

你知道如何构建JavaScript代码，使其不那么分离，并且检查在某种程度上是一个部分（或更合乎逻辑），而不是三个分离的部分吗？

欢迎提出任何想法。