Jquery 動的チェックボックスグールプを作成

Jquery 動的チェックボックスグールプを作成
------------------- html -------------------
<div id="DivCheckBoxGroup" class="btn-group btn-group-sm submit-doc" data-toggle="buttons">
</div>
<input type="hidden" id="CheckBoxGroupVal" value="@Model.CheckBoxGroupVal"/>
------------------- js -------------------
function CreateCheckBoxGroup(dataType) {
        var JsonData = '@Url.Action("GetJsonData", "controller名")';
        $.ajax({
            url: JsonData,
            type: "POST",
            dataType: "json",
            //data: { par1: dataType, par2: 0 },
            success: function (data) {
                var divshow = $("#DivCheckBoxGroup");
                divshow.text("");
                if (dataType == 1) {
                    for (var j = 0; j < data.length; j++) {
                        var htmlData = "<label class='btn btn-default' )>"
                        htmlData += "<input type='checkbox' id = 'checkboxgroup' name='checkboxgroup' value='" + data[j].xxx_id + "' />" + data[j].xxx_name
                        htmlData += "</label>"
                        divshow.append(htmlData);
                    }
                    SetCheckBox()
                }
            },
            error: function (msg) {
            }


        })
    };
        
    // checkboxの設定（チェック）
    function SetCheckBox() {
        var selItem = $("#CheckBoxGroupVal").val();//選択する値
        if (selItem != '') {
            var str = new Array();
            str = selItem.split(",");
            for (var i = 0; i < str.length; i++) {
                $('input[name="checkboxgroup"]').each(function () {
                    if (str[i] == $(this).val()) {
                        $(this).parent('label').addClass('active');
                    }
                });
            }
        }


    };

    // checkboxの（チェックなし）
    function UnSetCheckBox() {
        $('input[name="checkboxgroup"]').each(function () {
            $(this).parent('label').removeClass('active');
        });


    };