为什么序列化只采用最后一个元素

Question

我有以下HTML表单。

<form class="form-horizontal" role="form" method="post" action="" id="scheduler_form">
                        <div class="form-group">
                            <label for="url" class="col-sm-3 control-label">URL</label>
                            <div class="col-sm-6">
                                <input type="url" name="url" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="reporttemplate" class="col-sm-3 control-label">SELECT REPORT TEMPLATE</label>
                            <div class="col-sm-4">

                                <select name="report_template_id" id="report_list_sel" class="form-control" data-placeholder="Choose a Template" required="required" name="reportTemplate">

                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="frequency" class="col-sm-3 control-label">FREQUENCY</label>
                            <div class="col-sm-9">
                                <label class="radio-inline" for="inlineRadio1">
                                    <input type="radio" name="interval_secs" id="inlineRadio1" value="3600" checked="checked">Hourly
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="interval_secs" id="inlineRadio2" value="86400">Daily
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="interval_secs" id="inlineRadio3" value="604800">Weekly
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="frequency" class="col-sm-3 control-label">Analysis Type</label>
                            <div class="col-sm-9">
                                <label class="radio-inline">
                                    <input type="radio" name="analysis_type" id="analysis_type1" value="detailed" checked="checked">Detailed
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="analysis_type" id="analysis_type2" value="lite">Lite
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="email" class="col-sm-3 control-label">EMAIL</label>
                            <div class="col-sm-6">
                                <input type="email" name="email" class="form-control">
                            </div>
                        </div>

                        <label for="alerts" class="col-sm-3 control-label" style="padding-right:23px">ALERTS</label>
                        <div class="form-group">
                            <div class="checkbox col-sm-offset-3" id="alert_list" name="alerts" style="height:100px;overflow-y:auto">
                            </div>

                        </div>

                        <button type="submit" class="btn btn-warning pull-right" id="create_schedule">CREATE</button>
                        <button type="button" class="btn btn-default pull-right closediv" data-dismiss="setup_blk" aria-label="Close">CANCEL</button>
                    </form>

我正在将表单序列化为

$('#create_schedule').on('click', function (event) {
            // Call a function createScheduler to build json data for AJAX - POST call and get response.
            event.preventDefault();
            createScheduler($( '.form-horizontal' ).serializeJSON());
        });

使用github.com/macek/jquery-serialize-object

但是alert_list正在通过JS填充

function alertDataSuccessHandler(_data) {
            renderLists($('#alert_list'), _data, 'checkbox_list');
        }

 function renderLists(_target, _data, _type) {
        _target.empty();
        switch (_type) {
        case 'listWithCheck':
            $.each(_data, function (_index, _elem) {
                _target.append('<li class="md-text darkgrey-text list-group-item list-group-item-grey"><input type="checkbox" style="margin-right:5px" class="cb_rules" value="' + _elem.rule + '">' + _elem.desc + '</li>')
            });
            break;
        case 'checkbox_list':
            $.each(_data, function (_index, _elem) {
                _target.append('<label><input type="checkbox" name="alerts" value="' + _elem.alert + '">' /*+ _elem.rule + '">'*/ + _elem.desc + '</label></br>')
            });
            break;
        case 'simpleList':
            $.each(_data, function (_index, _elem) {
                if (_elem.rules.length > 0) {
                    $.each(_elem.rules, function (__index, __elem) {
                        _target.append('<li class="list-group-item-no-bg-no-brdr">' + __elem.desc + '</li>')
                    });
                } else {
                    _target.append('<li class="list-group-item-no-bg-no-brdr">' + _elem + '</li>')
                }
            });
            var _heading = $("#report_template option:selected").html();
            $("#module_name").empty().html('Selected Module - ' + _heading);
            break;
        case 'select':
            $.each(_data, function (_index, _elem) {
                _target.append('<option value="' + _elem.template_id  + '">' + _elem.name + '</option>');
            })
            break;
        }

    }

现在生成警报列表为

<div class="checkbox col-sm-offset-3" id="alert_list" name="alerts" style="height:100px;overflow-y:auto"><label><input type="checkbox" name="alerts" value="num_domains">Number of domains change by 10 percent or more.</label><br><label><input type="checkbox" name="alerts" value="med_load_time">Median load time change by 20 percent or more.</label><br><label><input type="checkbox" name="alerts" value="avg_load_time">Average load time change by 20 percent or more.</label><br><label><input type="checkbox" name="alerts" value="tot_req">Total requests change by 10 percent or more.</label><br></div>

现在我的序列化JSON出现了

{
  "url":"http://example.com/main.aspx",
  "report_template_id":"1","interval_secs":"86400",
  "analysis_type":"detailed","email":"rokumar@example.com",
  "alerts":"avg_load_time"
}

它仅获取最后一个选中的值。我希望警报为逗号分隔列表。

{
 "url":"http://example.com/main.aspx",
 "report_template_id":"1","interval_secs":"86400",
 "analysis_type":"detailed","email":"rokumar@example.com",
 "alerts":"num_domains, 
  avg_load_time"
}

为什么只挑选最后一个复选框，如何更改代码以获取以逗号分隔的列表。