javascript - 動的チェックボックスからの JSON オブジェクトの作成

Question

まず、jQuery を使い始めたばかりなので、ご容赦ください。

データを次の形式にしようとしています...

{
"qualifications": [
    "1",
    "7"
],
units: [
    "7",
    "3",
    "1"
]
}

HTMLは……

        <div class="control-group ">
    <label for="qualifications" class="control-label required">Qualifications</label>
    <div id="qual-holder" class="controls">
        <table class="table">
            <tbody>
                <tr>
                    <td>Induction</td>
                    <td>
                        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out">
                            <input id="qual" name="qual[1]" type="checkbox" value="1">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>LearnerZone Academy</td>
                    <td>
                        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out">
                            <input id="qual" name="qual[7]" type="checkbox" value="7">
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="control-group ">
    <label for="units" class="control-label required">Units</label>
    <div id="unit-holder" class="controls">
        <table class="table">
            <tbody>
                <tr>
                    <td>Data Protection (DP1)</td>
                    <td>
                        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out">
                            <input id="unit" name="unit[7]" type="checkbox" value="7">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Equal Opportunities (EQ1)</td>
                    <td>
                        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out">
                            <input id="unit" name="unit[3]" type="checkbox" value="3">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Health &amp; Safety (HS1)</td>
                    <td>
                        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out">
                            <input id="unit" name="unit[1]" type="checkbox" value="1">
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

そして最後に私の動かないjQuery...

function questionCount() {
// Create the arrays
var qualifications = [];
var units = [];

// Search the DOM for checked quals
$.each('input[name="qual[]"]:checked', function() {
    // This creates an object
    var value = $(this).val();
    qualifications.push(value);
});

// Search the DOM for checked units
$.each('input[name="unit[]"]:checked', function() {
    // This creates an object
    var value = $(this).val();
    units.push(value);
});

alert("Qualifications = " + JSON.stringify(qualifications) + " Units = " + JSON.stringify(units));
}

$("input[type=checkbox]").on( 'change', questionCount() );

アイデアは、ユーザーが 1 つ以上のチェックボックスをオンにして、それを ajax 呼び出しに渡して選択数を絞り込むことができるというものです。

誰か助けてくれませんか？